hato
0
こんにちは、KNAPの足立です。
今回はgsapを使用してスクロール追従で画像が切り替わるアニメーションを実装したのでその方法を書いていこうと思います。
See the Pen clippath_scroll by knap_develp (@knap_develp) on CodePen.
gsap.to(".js-pin", {
scrollTrigger: {
trigger: ".js-pin",
start: 'top top',
end: 'bottom bottom',
pin: true,
pinSpacing: false,
},
});
画像の固定はscrollTriggerのpinを使用して固定しています。
const mag = 2;
const imgItems = document.querySelectorAll(".l-scroll_img_item img");
const commonHeight = imgItems.length * 100 * mag;
document.documentElement.style.setProperty("--commonHeight", `${commonHeight}vh`);
:root {
--commonHeight: 100vh;
}
.l-scroll_img_wrapper {
position: relative;
height: var(--commonHeight);
margin-bottom: 30vh;
}
どのくらいのスクロール量の画像固定を行うかを計算します。今回は画面の高さx2x4枚分の高さ固定するようにカスタム変数の–commonHeightに代入します。
またmag変数の数値を増加することで画像固定のスクロール量を延ばすことができます
document.querySelectorAll('.js-clip').forEach((item,index) => {
gsap.to(item, {
clipPath: 'polygon(0 0%, 100% 0%, 100% 100%, 0% 100%)',
scrollTrigger: {
trigger: item,
start: `top+=${window.innerHeight * index * mag}px`,
end: `top+=${window.innerHeight * (index +1) * mag}px`,
scrub: .5,
},
});
});
forEachで各.js-clipクラスに対しアニメーションの開始地点と終了地点を設定します。
index引数が何番目のjs-clipを表すので、そのおかげで開始地点(srart)と終了地点(end)を個々に調整することができます。
またscrubに数値を入れることでゆったりとスクロールに連動してアニメーションしてくれるようになります。
以上です!
では本日はこのへんで〜