distortContentOnScroll

こんにちは

祝日はあると嬉しく感じるけど、結局だらけてしまうから生産性と生活リズムを保つっていう面では休みすぎるのもやや難ありやなと思ってきてますどうもハヤトワンです。

この時間の更新が物語っている(ただいま17:25)

ということで、今日のコーディング

スクロールに合わせて歪み散らかしてますね。

これはこんなjsで動いております。

        const content = document.querySelector("section");
        let currentPos = window.pageYOffset;

        const callDistort = function() {
            const newPos = window.pageYOffset;
            const diff = newPos - currentPos;
            const speed = diff * 0.35;

            content.style.transform = `skewY(${speed}deg)`;
            currentPos = newPos;
            requestAnimationFrame(callDistort);
        };
        callDistort();

ページのスクロール量と、関数内でのスクロール量の差分に0.35をかけたものをstyleでtransformのskewYにいれて、またnewPosをcurrentPosにいれて歪みをもとに戻す感じ。そしてcallDistortの関数をrequestAnimationFrame()の引数にいれてアニメーションを実行。

requestAnimationFrameとは

・jsでアニメーションを行う際、requestAnimationFrameを使うとパフォーマンスの低下を防ぐことができる
requestAnimationFrameは渡した関数をブラウザの表示を邪魔しないタイミングで処理されるようにする関数である。

といった感じでございます。

それでは素敵な祝日を。