<div class="scroll-anim-04 js-scroll-anim-04"><img src="https://picsum.photos/id/237/300/200" alt="" /></div>
.scroll-anim-04.js-scroll-anim-04
img(src=img, alt='')
{
"img": "https://picsum.photos/id/237/300/200"
}
$BLOCK_NAME: '.scroll-anim-04';
// 変数
$easing_default: cubic-bezier(0.87, 0, 0.13, 1);
#{ $BLOCK_NAME } {
position: relative;
width: 300px;
overflow: hidden;
&::after {
position: absolute;
top: -5%;
right: -10%;
bottom: -5%;
left: -10%;
display: block;
content: '';
background: #fff;
transform: rotate(0.09deg) skewX(10deg);
}
&.is-animated {
&::after {
transition: transform 1s $easing_default;
transform: rotate(0deg) skewX(10deg) translateX(-100%);
}
}
& > img {
width: 100%;
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim04 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-04');
// アニメーションを設定
[...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();
}
});
}
}