Question

编辑：问题是使用javascript动画而不是CSS过渡。 codepen现在展示了一个工作示例，其中JS仅用于转换元素，CSS用于为其设置动画！

我正试图达到我在本网站上看到的某种效果：https://draft.co.jp/en/projects/page/geechs。

他们在具有固定高度的body元素中使用固定定位的主要部分（以生成滚动条）。滚动后，它们将转换主元素中的所有元素与$（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);
});

不知何故，除了“滚动触发器”之外，还有更多“结束动画”消息，我也不明白。

任何人都有任何想法如何解决抖动动画？

谢谢！

Answer 1

他们正在大力使用Greensock的GSAP，这是一个很好的lib，但更多的是企业解决方案和一个不错的学习曲线。

一个好的起点是检查requestAnimationFrame和限制方法（我在这个例子中使用了lodash）。

使用translateY（或X或3d）也有助于代替使用top

这是一个带有HTML / CSS / JS的JSBin演示，但这里是相关的一点：

<强> 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一个transition也可以帮助流动性。在这种情况下只需50ms，因为它反复发射。它模拟了速度/动量效应

滚动时Jquery动画css会导致抖动

1 个答案: