Javascript GreenSock JS鼠标滚轮上的平滑视差
我一直在玩greensock js,这是一个很好的平滑动画工具。我正在尝试重建一个简单的脚本,它可以平滑主体滚动,以不同的速度滚动DOM元素,最终得到很好的高清视差效果。这是密码Javascript GreenSock JS鼠标滚轮上的平滑视差,javascript,parallax,gsap,Javascript,Parallax,Gsap,我一直在玩greensock js,这是一个很好的平滑动画工具。我正在尝试重建一个简单的脚本,它可以平滑主体滚动,以不同的速度滚动DOM元素,最终得到很好的高清视差效果。这是密码 $(function(){ var $window = $(window); //Window object var $parallax = document.getElementById('parallax'); //parallax object var scrollTime = 0
$(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操作工作正常,但第二个不正常。
请检查平滑滚动演示的原始文章
我想实现的是滚动,例如,标题文本与不同的速度滚动值实际上
有什么想法吗?提前谢谢