我在我的网站上有一个视差效应,但滚动它似乎相当跳跃如下：
这是代码：
jQuery(document).ready(function() {
jQuery(window).scroll(function() {
jQuery('*[class^="prlx"]').each(function(r) {
var pos = $(this).offset().top;
var scrolled = $(window).scrollTop();
jQuery('*[class^="prlx"]').css('top',+(scrolled * 0.6) + 'px');
});
});
});
*[class^="prlx"] {
position: absolute;
width: 100%;
height: 300%;
top: 0;
left: 0;
z-index: -1;
background-size: 110%;
}
.prlx-2 {
background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container-fluid homeHeader"> <div class="prlx-2"> </div> </div>
更新：进一步的测试,它似乎在Chrome完美的工作,但Safari和FireFox正在显示问题.
解决方法
我的代码没有看到任何错误.我会打赌,原因是你的图像的2,1MB,从2500px调整为窗口宽度.考虑到浏览器正在尝试“绘制”图像并计算每个滚动值的位置…
我会用CSS上的背景位置来处理它,但是与你保持一致,这个问题似乎关注于性能.你在JS上做的是有点低效,因为首先你选择所有’* [class ^ =“prlx”]循环通过它们,然后你再次应用所有的在每个循环中一个位置重新计算,再次查看他们.当您循环使用元素时,可以使用此元素并对其进行更改.将$this保存到变量只是不对同一个元素应用jQuery两次并保存一点资源,但在这种情况下可能不那么重要.
在我的笔记本电脑上,我看不到它跳跃.尝试并使用较小的图像来查看它是否提高了性能.
jQuery(document).ready(function() {
jQuery(window).scroll(function() {
jQuery('*[class^="prlx"]').each(function(r) {
var $this = $(this);
var pos = $this.offset().top;
var scrolled = $(window).scrollTop();
$this.css('top',+(scrolled * 0.6) + 'px');
});
});
});
*[class^="prlx"] {
position: absolute;
width: 100%;
height: 300%;
top: 0;
left: 0;
z-index: -1;
background-size: 110%;
}
.prlx-2 {
background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container-fluid homeHeader"> <div class="prlx-2"> </div> </div>
