ワードプレスSWELLテーマのメインビジュアルの写真を固定【パララックス効果】する方法について

2024年6月23日

本記事では、WordPressの大人気テーマ『SWELL』のメインビジュアルを固定表示させたい時の方法について紹介していきます。

パララックス効果をサイトに加えることでデザインの幅を広げることができますので是非お試しください。

メインビジュアルを固定表示させる方法

.p-mainVisual .p-mainVisual__imgLayer,
.p-mainVisual .c-filterLayer::before, .p-mainVisual .c-filterLayer::after,
.p-mainVisual .swiper-wrapper
{
    position: fixed;
}

上記のコードはメインビジュアルを固定表示させるためのコードになります。

window.addEventListener('DOMContentLoaded', () => {
    const mainVisual = document.getElementById('main_visual');
    const content = document.getElementById('content');

    let mainVisualHeight = mainVisual.clientHeight;

    window.addEventListener('scroll', () => {
        let scrollPosition = window.scrollY;
        const elementsToFix = document.querySelectorAll('.p-mainVisual .p-mainVisual__imgLayer, .p-mainVisual .c-filterLayer::before, .p-mainVisual .c-filterLayer::after, .p-mainVisual .swiper-wrapper');

        if (scrollPosition <= mainVisualHeight) {
            elementsToFix.forEach(element => {
                element.style.position = 'fixed';
            });
        } else {
            elementsToFix.forEach(element => {
                element.style.position = 'static';
            });
        }
    });
});

上記のコードはユーザーのスクロール量を監視してメインビジュアルを固定または固定解除するためのコードです。

ブログパーツ部分もスクロールさせる方法

.p-mainVisual__textLayer .p-blogParts {
    transform: translateY(0px);
    transition: all 0.1s;
}

初期の位置を指定し、スクロール時の動きをスムーズにするためのコードを追加しています。

if (scrollPosition <= mainVisualHeight) {
    elementsToFix.forEach(element => {
        element.style.position = 'fixed';
    });
    elementsTextLayer.forEach(text => {
        text.style.transform = `translateY(-${scrollPosition}px)`;
    });
} else {
    elementsToFix.forEach(element => {
        element.style.position = 'static';
    });
    elementsTextLayer.forEach(text => {
        text.style.transform = 'translateY(0px)';
    });
}

ユーザーのスクロールに応じてブログパーツ部分もスクロールされるコードを追加しています。