Zenn
Open1

STUDIOでスクロールに応じたアニメーションをつける

#
studio
miyaponmiyapon

例えばスクロールしてからヘッダーの背景色をつけたいシーン

※カスタムコードを使う前提。

デザインエディタ

  • ヘッダーのidに header と記載しておく。

style

#header.scrolled {
background-color: #fff; /* スクロール時の背景色 */
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* スクロール時のシャドウ */
}

script

function initializeHeaderScrollEffect() {
    const header = document.getElementById('header');

    window.addEventListener('scroll', function() {
        if (window.scrollY <= 100) {
            header.classList.remove('scrolled');
        } else {
            header.classList.add('scrolled');
        }
    });
}
initializeHeaderScrollEffect();

STUDIOはカスタムコードが後から呼び出されるので、functionを呼び出すだけで良い。これ忘れがち。