https://www.icu.ac.jp/refurbishment-assets/js/Parallax.js

1export default class Parallax {
2  constructor(args) {
3    this.triggers = args.triggers;
4    this.childrenTexts = args.childrenTexts ? args.childrenTexts : null;
5
6    this._init();
7  }
8
9  _init() {
10    //const triggers = gsap.utils.toArray(this.triggers);
11
12    gsap.utils.toArray(this.triggers).forEach((trigger) => {
13      const tl = gsap.timeline({
14        scrollTrigger: {
15          trigger: trigger,
16        },
17      });
18
19      tl.from(trigger, {
20        alpha: 1,
21        y: 30,
22        //ease: 'power4.in',
23      });
24
25      const childrenTextsNodes = trigger.querySelectorAll(this.childrenTexts);
26
27      if (childrenTextsNodes.length) {
28        childrenTextsNodes.forEach((text) => {
29          // if ((text = 'Christian')) {
30          // }
31          const textArray = text.textContent.trim().split('');
32
33          text.innerHTML = textArray.reduce((prev, current) => {
34            if (current === ' ') {
35              current = ' ';
36            }
37            return `${prev}<span>${current}</span>`;
38          }, '');
39          //text.innerHTML = splitted;
40        });
41
42        const q = gsap.utils.selector(trigger)(`${this.childrenTexts} span`);
43
44        tl.from(q, {
45          alpha: 0,
46          y: 10,
47          stagger: 0.015,
48          ease: Power3.easeOut,
49        });
50      }
51    });
52  }
53}