https://i-nanaka-pianoschool.com/static/js/animation.js?1791416721.1966977

1'use strict';
2const animationClassName = [
3    'fade_in', 'fadeIn', 'fadeUp', 'fadeDown', 'fadeLeft', 'fadeRight', 'fadeInFast', 'fadeUpFast', 'fadeDownFast',
4    'fadeLeftFast', 'fadeRightFast'
5];
6
7// 要素がビューポート内に入っているか判定し、いたらアニメーションを開始するcssクラスを追加する
8function animateParts(nodeList) {
9    // ビューポートの縦幅
10    const viewHeight = window.innerHeight;
11    // ビューポートの上端の位置
12    const viewTop = Math.round(window.scrollY);
13    // ビューポートの下端の位置
14    const viewBottom = viewTop + viewHeight;
15
16    // ページの縦幅
17    const bodyHeight = document.body.clientHeight;
18    
19    // アニメーションを再生する時に、要素がビューポートに入っているピクセル数
20    const startPoint = 150;
21
22    for (var i=0, length=nodeList.length; i<length; i++) {
23        // 対象の要素の、ビューポートの上端からの位置
24        const elementTop = nodeList[i].getBoundingClientRect().top;
25
26        if (
27            // 要素がビューポートにある程度入ったら
28            (elementTop <= viewHeight - startPoint)
29            // ページの下端までスクロールされたら
30            || (bodyHeight <= viewBottom)
31        ) {
32            nodeList[i].classList.add('animation_start');
33        }
34    }
35}
36
37function setAnimation() {
38    for (var i=0, length=animationClassName.length; i<length;i++) {
39        const animatedParts = document.getElementsByClassName(animationClassName[i]);
40        animateParts(animatedParts);
41    }
42}
43window.addEventListener('load', setAnimation);
44window.addEventListener('scroll', setAnimation);