【WordPress】エディタ内のコンテンツを表示する時にスクロールアニメーションを指定する方法

RELEASE / 2024.7.13 UPDATE / 2024.07.12

CSSアニメーション

jQuery

WordPress

スクロールアニメーション

WordPressのエディタ内に書かれた文章は自動でタグが生成され囲われるため、任意のクラスを付けてスクロールアニメーションを設定するには工夫が必要です。
この記事では、この方法をご紹介したいと思います。

この記事の目次を表示

1 エディタ内のコンテンツを表示する時にスクロールアニメーションを指定する
2 まとめ

エディタ内のコンテンツを表示する時にスクロールアニメーションを指定する

エディタ内のコンテンツを出力するテンプレートファイルは以下のように記述します。

<div class="wp-editor">
    <?php the_content(); ?>
</div>

エディタ内のコンテンツを出力する部分に任意のクラス名を指定します。
サンプルコードではclass="wp-editor"を指定しています。

続いて、以下のjQueryコードを記述します。

$(function(){
    let len = $('.wp-editor > *').length;
    $('.wp-editor > *').each(function(i){
        $(this).addClass('view');
    });
});

この記述をすることで、ページを読み込んだ際にclass="wp-editor"の中の直下のタグにclass="view"が設定されます。

続いて、ページ読み込み完了時とスクロール時にクラスを追加するためのjQueryコードを記述します。

$(window).on('load scroll',function(){
    $('.view').each(function(){
        let item = $(this).offset().top;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll > item - windowHeight){
            $(this).addClass('scrollin');
        }
    });
});

この記述をすることで、class="view"が設定されている要素が画面内に入ったタイミングでclass="scrollin"を設定されます。

そして、最後にCSSアニメーションを用意します。

.view{
    opacity : 0;
    transform : translate(0, 0.7rem);
    transition : all 750ms;
}
.view.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}

このサンプルではフワッと下から上にフェードインするCSSアニメーションになります。

その他のスクロールに合わせたCSSアニメーションは以下の記事でいろいろ詳しくご紹介しています。