webmanab.html

menu

スクロールのイージングとパララックス効果 – 『TweenMax』

 

demo

スクロールに連動してで滑らかにオブジェクトを移動しつつ、スクロールのイージングをコントロールする。


const scrollSlow = () => { let $window = $(window); let scrollTime = 3; let scrollDistance = 6; $window.on("mousewheel DOMMouseScroll", function(e) { e.preventDefault(); let delta = e.originalEvent.wheelDelta || e.originalEvent.detail * 40 * -1; let scrollTop = $window.scrollTop(); let finalScroll = scrollTop - delta * scrollDistance; TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); }); } scrollSlow(); const scrollAnim = () => { let delta = 5; let speed = 1.5; $(window).scroll(() => { let elementScroll = $('[data-parallax]'); let scroll = $(window).scrollTop(); scrollHandler(scroll); function scrollHandler(scroll) { $(elementScroll).each(function() { let el = $(this); let ratio = el.attr('data-parallax'); let offsetTop = el.offset().top - scroll; let translateY = offsetTop * ratio / delta * -1; TweenMax.to(el, speed, { y: translateY }); }); } }); }; scrollAnim();

share

lab