javascript - 是否有可能在一定数量的滚动像素上出现动画？

Question

我想做的是:

在用户向下滚动页面 600 像素(或页面向下 20%)后，在接下来的 800 像素(或页面的下一个 10% 距离)上会出现动画。文本将从右向左移动，即从 0 到 -200%。它应该以 600 像素开始动画并以 1400 像素结束动画。这可能吗？

目前我想这样做:

$('.div1').css({
    'position' : 'fixed',
    'top' : '-32%',
    'display' : 'block',
    'width' : '100%'
}).addClass('locked');

在达到 600px 后移动到顶部 div，强制它不动，而下一个 div 将设置动画。当我的文本动画化并可能覆盖内容时，如何防止页面的其余部分向上滚动？

Answer 1

Skrollr 就是这样做的。

检查一下。

https://github.com/Prinzhorn/skrollr