WordPressサイトで、ブロックエディタで追加した画像やテキストを1度だけフェードイン表示させる方法をご紹介します。

フェードインのサンプルイメージ

次のように、画面に入った要素をふんわりとフェードインさせます。1度表示した要素は、スクロールを戻してもそのまま表示し続けます。

フェードインの設定方法

追加CSSとJavaScriptでフェードインを設定します。

対象にブロックエディタで追加CSSクラスを設定する

まずは、フェードインさせたい要素にブロックエディタで追加CSSクラスを設定します。

今回は、過去にご紹介した年表タイムラインのブロックに追加CSSクラスmy-fade-in-blockを設定します。

• WordPressサイトで年表タイムラインをブロックエディタで作る方法

追加CSSを設定する

次のCSSをWordPress子テーマのstyle.cssに記載します。

/* 初期表示 */
.my-fade-in-block {
    opacity: 0;             /* 透過 */
    transition: opacity 1s; /* 透過状態の繊維時間 */
}

.my-fade-in-block.displayed {
    opacity: 1; /* 透過解除 */
}

• WordPress子テーマの作り方

追加PHPを設定する

次のPHPをWordPress子テーマのfunctions.phpに記載します。

function my_fade_in_block_animation() {
?>
    <script>
        // フェードイン処理部
        function fadeInCallback(entries, observer) {
            entries.forEach((entry) => {
                // 対象が画面に入ったとき
                if (entry.isIntersecting) {
                    // 1度だけフェードインする
                    entry.target.classList.add("displayed");
                    observer.unobserve(entry.target);
                }
            });
        }

        // フェードイン処理を定義
        const fadeInOptions = { threshold: 0.5 }; // 対象の半分が画面に入ったらフェードインする
        const fadeObserver = new IntersectionObserver(fadeInCallback, fadeInOptions);

        // フェードインさせる対象
        const fadeInTargets = document.querySelectorAll(".my-fade-in-block");

        // 対象にフェードイン処理を適用
        fadeInTargets.forEach((elTarget) => {
            fadeObserver.observe(elTarget);
        });
    </script>
<?php
}
add_action('wp_footer', 'my_fade_in_block_animation');

以上を設定した後に追加CSSクラスを設定した要素のあるWebページを見ると、はじめにご紹介したようにフェードインで表示されます。

まとめ

WordPressサイトで、ブロックエディタで追加した画像やテキストを1度だけフェードイン表示させる方法をご紹介しました。

ちょっとしたアニメーションを加えるだけで、Webサイトの印象がガラッと変わります。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応しているのでお気軽にご相談ください。