<img class="scroll-anim-02 js-scroll-anim-02" src="https://picsum.photos/id/237/200/300" alt="" />
img.scroll-anim-02.js-scroll-anim-02(src=img, alt='')
{
"img": "https://picsum.photos/id/237/200/300"
}
$BLOCK_NAME: '.scroll-anim-02';
// 変数
$easing_default: cubic-bezier(0.545, 0.08, 0.52, 0.975);
#{ $BLOCK_NAME } {
max-width: 200px;
filter: blur(10px);
opacity: 0;
transition-timing-function: $easing_default;
transition-duration: 0.5s;
transition-property: opacity, filter;
&.is-animated {
filter: blur(0);
opacity: 1;
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim02 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-02');
// アニメーションを設定
[...els].forEach(el => {
const imgAnim = new ImgAnim(<HTMLElement>el);
imgAnim.init();
});
}
class ImgAnim {
el: HTMLElement;
constructor(el: HTMLElement) {
this.el = el;
}
/**
* 初期化
*/
init(): void {
this.scrollHandler();
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
ScrollTrigger.create({
trigger: this.el,
start: 'top 70%',
onEnter: self => {
// 「is-animated」クラスを付与
this.el.classList.add('is-animated');
self.kill();
}
});
}
}