スクロールのイージングとパララックス効果 – 『TweenMax』
スクロールに連動してで滑らかにオブジェクトを移動しつつ、スクロールのイージングをコントロールする。
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();
