1

我一直在玩greensock js,它是一个很棒的平滑动画工具。我正在尝试重建一个简单的脚本,该脚本可以平滑身体滚动以以不同的速度滚动 DOM 元素,最终得到很好的“高清”视差效果。这是代码

$(function(){

var $window = $(window);        //Window object
var $parallax = document.getElementById('parallax');        //parallax object

var scrollTime = 0.3;           //Scroll time
var scrollDistance = 200;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll
var parallaxDistance = 150;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);
    var finalParallax = scrollTop - parseInt(delta*parallaxDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
            autoKill: true,
            overwrite: 5                            
        });

    TweenMax.to($parallax , scrollTime, {
        scrollTo : { y: finalParallax, autoKill:true },
            ease: Power1.easeOut,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
            autoKill: true,
            overwrite: 5                            
        });


});

});

第一个 TweenMax.to() 操作完美,但第二个不是。请查看带有平滑滚动演示的原始文章http://blog.bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/ 我想要实现的是滚动例如标题文本以不同的速度(实际上滚动值)。

有什么想法吗?提前谢谢!

4

0 回答 0