<p class="scroll-anim-10 js-scroll-anim-10">SCROLL</p>
p.scroll-anim-10.js-scroll-anim-10 #{ text }
{
"text": "SCROLL"
}
$BLOCK_NAME: '.scroll-anim-10';
// 変数
$duration_default: 1.8s;
$easing_default: cubic-bezier(0.25, 1, 0.5, 1);
#{ $BLOCK_NAME } {
font-family: 'Cormorant Garamond', serif;
font-size: 200px;
font-style: italic;
font-weight: 700;
& span {
display: inline-block;
opacity: 0;
transition: all $duration_default $easing_default;
transform: translate(80px, 80px) matrix(0.43, 0.72, 0.63, 0.59, 0, 0);
@for $i from 1 to 20 {
&:nth-child(#{$i}) {
transition-delay: #{100 * $i}ms;
}
}
}
&.is-animated span {
opacity: 1;
transform: translate(0, 0) matrix(1, 0, 0, 1, 0, 0);
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim10 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-10');
// アニメーションを設定
[...els].forEach(el => {
const imgAnim = new Anim10(<HTMLElement>el);
imgAnim.init();
});
}
class Anim10 {
el: HTMLElement;
constructor(el: HTMLElement) {
this.el = el;
}
/**
* 初期化
*/
init(): void {
this.textInit();
this.scrollHandler();
}
/**
* テキストを初期化
*/
textInit(): void {
// アニメーション用に分割
let markup = '';
const text = this.el.textContent;
text.split('').forEach(l => {
markup += `
<span>${l}</span>
`;
});
this.el.innerHTML = markup;
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
ScrollTrigger.create({
trigger: this.el,
start: 'top 70%',
onEnter: self => {
// 「is-animated」クラスを付与
this.el.classList.add('is-animated');
self.kill();
}
});
}
}