https://www.wildbunchfest.jp/wp/wp-content/themes/rcnt/js/modules/floating.js

1let lastScrollY = window.scrollY;
2let delayedScrollY = lastScrollY;
3
4const children = document.querySelectorAll('.js--floating'); // 複数の要素を取得
5
6function lerp(start, end, factor) {
7    return start + (end - start) * factor;
8}
9
10function updatePosition() {
11    delayedScrollY = lerp(delayedScrollY, window.scrollY, 0.2); // スムーズに追従
12    let baseOffset = window.scrollY - delayedScrollY; // 基本の追従量
13
14    children.forEach(child => {
15        let offsetMultiplier = 1.5; // デフォルトの追従の遅れ量
16
17        // クラスによって追従の遅れ量を変更
18        if (child.classList.contains('js--floating_delay1')) {
19            offsetMultiplier = 0.5;
20        } else if (child.classList.contains('js--floating_delay2')) {
21            offsetMultiplier = 2.0;
22        }
23
24        let offset = baseOffset * offsetMultiplier; // 遅れ量を適用
25        child.style.transform = `translateY(${offset}px)`; // 各要素に対してアニメーションを適用
26    });
27
28    requestAnimationFrame(updatePosition); // アニメーションフレームをリクエスト
29}
30
31updatePosition();