视差脚本在 Chrome 和移动设备上变得滞后 [英] Parallax script gets laggy in chrome and on mobile devices

问题描述

我将此代码用于我正在创建的网站的视差效果，在 safari 和 firefox(mac) 中效果很好.但是在 chrome(mac) 中它变得迟钝，当我在 iPad 和 iPhone 6 上尝试时也是如此.

Javascript:

 var ypos,image;函数视差(){image = document.getElementById('bgImage');ypos = window.pageYOffset;image.style.top = ypos * .4+ 'px';}window.addEventListener('scroll', parallax),false;

html:

<div id="box1" class="content"><h1>标题</h1><p>Lorem ipsum dolor坐.....</p>

(img-responsive - from bootstrap)

CSS:

#bgImage {位置:相对；z-索引:-1}

知道是什么导致了滞后效应吗?

解决方案

您可以尝试使用 translateY 来做视差动画效果，而不是操纵图像的顶部样式.这是一篇出色的帖子 由 Paul Irish 撰写，描述了为什么您应该进行翻译而不是 top/left/right/bottom.

所以代替:

image.style.top = ypos * .4+ 'px';

你可以这样做:

image.style.webkitTransform = 'translateY(' + ypos * .4 + 'px)';image.style.transform = 'translateY(' + ypos * .4 + 'px)';

祝你好运，如果有帮助，请告诉我！

I use this code for a parallax effect for a website I'm creating, works great in safari and firefox(mac). But in chrome(mac) it gets laggy, the same for when I try it on iPad and on my iPhone 6.

Javascript:

  var ypos,image;
  function parallax() {
    image = document.getElementById('bgImage');
    ypos = window.pageYOffset;
    image.style.top = ypos * .4+ 'px';
}
window.addEventListener('scroll', parallax),false;

html:

    <img class="img-responsive" id="bgImage" src="images/bgtopg.jpg">
</div>
     <div id="box1" class="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet.....</p>      
        </div>

(img-responsive - from bootstrap)

css:

#bgImage {
    position: relative;
    z-index: -1
  }

Any ideas what is causing the lag-effect?

解决方案

You could try doing the parallax animation effect with translateY instead of manipulating the top style of the image. This is an excellent post by Paul Irish that describes why you should be doing translation instead of top/left/right/bottom.

So instead of:

image.style.top = ypos * .4+ 'px';

You could do:

image.style.webkitTransform = 'translateY(' + ypos * .4 + 'px)';
image.style.transform = 'translateY(' + ypos * .4 + 'px)';

Good luck, let me know if it helps!

这篇关于视差脚本在 Chrome 和移动设备上变得滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！