<div class="scroll-anim-15 js-scroll-anim-15">
<div class="scroll-anim-15__img-wrapper">
<div class="scroll-anim-15__img"><img src="https://picsum.photos/id/1000/400/200" /></div>
</div>
</div>
.scroll-anim-15.js-scroll-anim-15
.scroll-anim-15__img-wrapper
.scroll-anim-15__img
img(src=img)
{
"img": "https://picsum.photos/id/1000/400/200"
}
$BLOCK_NAME: '.scroll-anim-15';
// 変数
$offset_bg: 72px;
#{ $BLOCK_NAME } {
&__img-wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
&__img {
position: absolute;
top: 0;
right: 0;
bottom: -$offset_bg;
left: 0;
& > img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim15 = () => {
const anim = new Anim15('.js-scroll-anim-15');
anim.init();
}
class Anim15 {
els: NodeListOf<HTMLElement>;
imgElSelector: string;
offsetParallax: number;
constructor(elsSelector: string) {
this.els = document.querySelectorAll(elsSelector);
this.imgElSelector = '.scroll-anim-15__img';
this.offsetParallax = 72;
}
/**
* 初期化
*/
init(): void {
if (!this.els.length) return;
this.scrollHandler();
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
[...this.els].forEach(el => {
const imgEl = el.querySelector(this.imgElSelector);
gsap.to(imgEl, {
scrollTrigger: {
trigger: el,
start: 'top bottom',
end: 'bottom top',
scrub: 1,
// markers: true,
},
y: -this.offsetParallax,
});
});
}
}
No notes defined.