Javascript 具有视差效果的渲染问题
我试图使用window.onscroll和scrollTop创建视差效果,但我一直遇到渲染问题,看起来我在渲染视口后收到了onscroll。正如您所看到的(代码附加),这些盒子的移动是不稳定的和不稳定的 这种行为在所有基于WebKit的浏览器和FireFox中都是相同的 JavaScriptJavascript 具有视差效果的渲染问题,javascript,html,css,scroll,parallax,Javascript,Html,Css,Scroll,Parallax,我试图使用window.onscroll和scrollTop创建视差效果,但我一直遇到渲染问题,看起来我在渲染视口后收到了onscroll。正如您所看到的(代码附加),这些盒子的移动是不稳定的和不稳定的 这种行为在所有基于WebKit的浏览器和FireFox中都是相同的 JavaScript $(document).ready(function() { $('.box').each(function() { $(this).data('y', $(this).offset().top
$(document).ready(function() {
$('.box').each(function() {
$(this).data('y', $(this).offset().top);
});
});
$(window).scroll(function() {
var scroll = $(this).scrollTop();
$('.box').each(function() {
var parallax = $(this).data('parallax');
if (parallax) {
var y = $(this).data('y');
var offset = (scroll - y) * parallax;
$(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
}
});
});
标记
<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>
Lorem ipsum door sit amet。
献祭精英。
南康塞特图多洛。
只是想知道是否值得使用一个预制的而不是“重新发明”轮子
在Chrome 11和FF 4中,我看起来很平滑-但是除了第一个(红色)div外,我看不到太多的视差效果。您是否尝试过使用
setInterval
而不是收听滚动事件?您使用的是什么操作系统?OSX SL上有明显的抖动。