jquery动画CSS上滚动导致抖动

编辑：问题是使用JavaScript动画，而不是CSS转换。该codepen现在显示了一个工作示例，其中JS仅用于翻译元素，而CSS则用于对其进行动画处理！jquery动画CSS上滚动导致抖动

我试图达到一定的效果，我在这个网站上看到：https://draft.co.jp/en/projects/page/geechs。

它们在具有固定高度的主体元素（用于生成滚动条）中使用固定位置的主要部分。滚动后，他们将以$（window）.scrollTop（）的比例翻译主要元素中的所有元素。他们使用平滑这种效果的动画。

我一直在尝试重新创建这种效果，但是我的代码会在几次滚动后产生抖动的体验。（例如，参见https://codepen.io/blauwhelm/pen/LRorNA）。

看起来，生成了很多动画（我在本例中使用通过jquery插件进行转换来为translate属性设置动画效果）导致了这个问题。我已经尝试使用限制来限制触发器的数量，但这并不能解决问题。

我的javascript：

$(document).ready(function() { 

var $mainElement = $('.main__element'); 

function smoothScroller(e) { 
    var scrollTop = $(window).scrollTop(); 
    console.log('scroll trigger'); 
    $mainElement.stop(true, false).transition({y: -scrollTop}, 3000, "cubic-bezier(.19,0.88,0,.99)", function() { 
     console.log('end animation'); 
    }); 
} 

$(window).bind('scroll', smoothScroller); 
});

不知怎的，还有比“滚动触发”多了很多“端动画”的消息，我也想不明白。

任何人有任何想法如何我可以修复紧张的动画？

谢谢！

来源

2016-10-28 Jan Zoutendijk

他们正在为此使用Greensock的GSAP，这是一个很好的解决方案，但更多的是企业解决方案和体面的学习曲线。

开始的好地方是检查出和节流方法（我在本例中使用lodash）。

使用translateY（或X，或3D）帮助的太不是使用top

这里有一个JSBin演示用HTML/CSS/JS，但这里的相关位：

var ticking = false, 
    item = document.querySelectorAll('.item'); 


// RAF 
function update() { 
    ticking = false; 
    item[0].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

function onScroll() { 
    ticking = ticking || requestAnimationFrame(update); 
} 

window.addEventListener('scroll', onScroll, false); 


// Scroll Throttle 
function throttled_version() { 
    item[1].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

window.addEventListener('scroll', _.throttle(throttled_version, 16), false);

给CSS a transition也可以帮助流动性。在这种情况下只有50ms，因为它反复发射。它有点模拟速度/动量效应

来源

2016-10-28 17:12:37 elzi

感谢您的回复。玩过你的代码后，我发现我不应该使用JS动画，而是CSS转换。这解决了问题！ –

jquery动画CSS上滚动导致抖动

回答

相关问题