1.0.2 • Published 11 months ago
momentum-parallax v1.0.2
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,
}
);
});
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
1 year ago
0.0.20
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago
0.0.0
1 year ago