momentum-parallax
v1.0.2
Published
GSAP + Smooth Scrollbar
Downloads
75
Readme
momentum-parallax
GSAP+Smooth Scrollbarで実現した慣性パララックスのスクロールモジュールです。
1. 利用方法
style-loader css-loader が必要
npm install style-loader css-loader --save
webpack.config.js: /.scss$/ → /.(scss|css)$/ に変更
pug:
.MomentumParallax-scrollarea
.MomentumParallax-scroller
//- コンテンツ
初期設定
import { MomentumParallax, gsap, ScrollTrigger } from "momentum-parallax";
var scrollbar = new MomentumParallax(
document.querySelector(".MomentumParallax-scrollarea"),
{
damping: 0.1,
delegateTo: document.querySelector(".MomentumParallax-scrollarea"),
overscrollDamping: 1,
proxyElem: ".MomentumParallax-scroller",
}
);
GSAP scrolltrigger
let tl = gsap.timeline({
scrollTrigger: {
trigger: "トリーガー要素",
scroller: ".MomentumParallax-scroller",
start: "top center",
end: "bottom top",
markers: false,
scrub: 0.7,
pin: false,
pinSpacing: false,
invalidateOnRefresh: true
},
});
tl.fromTo(
"アニメーションターゲット要素",
{
opacity: 1,
},
{
opacity: 0,
duration: 1,
},
0
);
Smooth ScrollbarのAPIも利用可能
document.querySelector(".btn").addEventListener("click", function () {
scrollbar.scrollobj.scrollIntoView(
document.querySelector("#trigger-div"),
{
alignToTop: true,
onlyScrollIfNeeded: false,
}
);
});