New Article

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

スポンサーリンク

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

概要

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

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

簡単!超軽量!プラグインなしでページ遷移時にフェードイン・アウトさせる方法
サイト内の別ページへの切り替え時にフェードイン/フェードアウトなどのエフェクトを施してくれる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 以上あり、任意の class をいろんな場所に追加するカスタマイズができます。
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;
   });
 });

以上です。

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

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

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

コメント

タイトルとURLをコピーしました