如何根据浏览器滚动y位置而不是按时间调整Greensock.js补间？ [英] How to adjust a Greensock.js tween based on browser scroll y position rather than by the time?

问题描述

如何根据滚动位置手动调整时间？那可能是什么样的？基本上滚动补间？这样补间会对滚动鼠标的Y位置作出反应，而不是根据预设的时间触发和执行？

How would I go about adjusting the time manually based on the scroll position? What might that look like? To basically 'scroll' the tween? So that the tween reacts to the scrolling mouse's Y position rather than just trigger and execute based on a preset time?

推荐答案

虽然Tahir的答案是正确和充分的，有很多不必要的代码来展示这个例子。

While Tahir's answer is correct and sufficient, there's a lot of unnecessary code to show the example.

一个更简洁的代码片段是：

A more concise snippet is:

var max_scroll = document.body.offsetHeight - window.innerHeight;

win.addEventListener('scroll', function(){
    var scroll_perc = parseFloat(Math.min(window.pageYOffset / max_scroll, 1).toFixed(2));

    TweenMax.to(tl, 0, {
        progress: scroll_perc
    });
});

var tl = new TimelineMax({paused: true});
// the rest of your timeline....

这篇关于如何根据浏览器滚动y位置而不是按时间调整Greensock.js补间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！