ページ遷移時にアニメーションを入れる方法【ライブラリなし】

次のページに進む際、トップに戻る際、ページ遷移時にアニメーションがあると、サイトの印象はかなり強くなりますよね。

概要
デモ
HTML
1. Cocoonの場合
CSS
Javascript(jQuery)
ページ遷移時アニメーションまとめ

概要

この記事では既にページ遷移時のアニメーションを紹介されている記事を参考に、当サイトでカスタマイズしたデザインを適用したものを紹介します。

下記の記事を参考に作成しました。ありがとうございます！

サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。例えば、以下のようなもの。また、「PJAX」というjQueryプラグインを利用す...

ライブラリなしのシンプルなのが、ありがたいです。

デモ

まずはデモページをご覧ください。

デモページ

こんな感じのカーテンがピロピローんみたいなアニメーションを実装します。

HTML

<body class="fo">
    <div class="fade_group">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fade_group2">
        <div></div>
        <div></div>
     </div> 
</body>

bodyにクラスを付け、後でJavascriptでこのクラスを取ったり付けたりします。
fade_group この要素は重ねる枚数によって調整してください。
枚数によっては疑似要素(before,after)の方がスマートだと思います。

Cocoonの場合

ワードプレスで直接bodyタグを編集できる場合は、bodyタグに以下をのように変更すればいいのですが、

<body <?php body_class('付けたいクラス名'); ?>>

なかなかbodyタグをいじれるテーマはないというか、いじるのは気が引けます。
下記の記事では、cocoonのボディ要素にクラスを付ける方法が紹介されています。

class を追加する Cocoon のフィルターフックのまとめ

WordPressテーマ Cocoon に用意されている class を追加するフィルターフックのまとめです。全部で 20 以上あります。

以下を子テーマのfunctions.phpに追加すると、cocoonには関数が用意されているので、body要素にクラスが追加されます。

add_filter( 'body_class_additional', function( $classes ) {
    $classes[] = '追加したいclass名';
    return $classes;
});

後は、cocoonの子テーマのtmp-user/body-top-insert.php に、以下追加するだけ。

<div class="fade_group">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="fade_group2">
    <div></div>
    <div></div>
</div>

CSS

.fade_group div ,
.fade_group2 div {
    content: '';
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group div {
    z-index: 9999;
    transition: .6s;
}
.fade_group2 div {
    z-index: 9998;
    transition: .8s;
}
.fade_group div:nth-of-type(1) {
    background: rgba(175,151,94,.3);
}
.fade_group div:nth-of-type(2) {
    background: rgba(175,151,94,.5);
    transition-delay:.1s;
}
.fade_group div:nth-of-type(3) {
    background: rgba(175,151,94,.7);
    transition-delay:.2s;
}
.fade_group div:nth-of-type(4) {
    background: rgba(50,50,50,1);
    transition-delay:.3s;
}
.fade_group2 div:nth-of-type(1) {
    background: rgba(175,151,94,.8);
    transition-delay: .2s;
}
.fade_group2 div:nth-of-type(2) {
    background: rgba(175,151,94,.8);
    transition-delay: .3s;
}
body.fo .fade_group div{
    left: 0;
}
body.fo .fade_group2 div{
    left: 100vw;
}

Javascript(jQuery)

Javascript(jQuery)は参考させてもらったDigiPressさんの記事そのままです。
※クラスだけデモページに合わせてます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

必要に応じて、jQueryを読み込ませてください。

$(window).on('load', function(){
    $('body').removeClass('fo');
});
$(function() {
    $('a:not([href^="#"]):not([target])').on('click', function(e){
        e.preventDefault();
        url = $(this).attr('href');
        if (url !== '') {
            $('body').addClass('fadeout');
            setTimeout(function(){
                window.location = url;
            }, 800);
        }
        return false;
    });
});

以上です。

ページ遷移時アニメーションまとめ

当ブログでも追加しようと思ったのですが、すこしクドイというか、邪魔すぎたので、実装は辞めましたｗｗ
せっかくなので、記事とデモページに残した形です。

仕組みは簡単ですし、cssアニメーションでいくらでもカスタマイズできるのが、面白いです。
クラスが付いたり消えたりで表示させてるので、応用もしやすいと思います。