ページ遷移アニメーションで詰まった話

投稿日 2021-02-26
更新日 2021-03-05
著者 iwa-shi
カテゴリー wordpress

ぺージ遷移アニメーションを実装するときに見事に詰まりました。

以下のnoteを参考に作ったのですが

背景が止まったまま動かない…ただ画像だけが表示される…なんで？

実装しようとしているサイトでは動かないのに

参考にしているサイトでは動く…ということは

実装したいサイトに問題があるので色々調べてみたら

原因判明！wordpressで全部のテンプレートに背景画像を設定するために

bodyにbackground-imageを適用していたが、iOSでは

background-attachment:とbackground-size: cover;の同時使用は

背景固定されないので疑似要素に背景画像をつけてた

body:before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-color:rgba(0, 0, 0, 0.8);
  background:url(/wp-content/uploads/2021/02/hoge.jpg)   center no-repeat;
  background-size:cover;
}

こいつのせいか！！！

背景画像はどのテンプレートでも表示したいし、ぺージ遷移アニメーションも欲しい…

afterだけでslide-inとslide-outすれば良いと思ったので

#page-animate:after {
  content: '';
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/wp-content/uploads/2021/02/hoge.jpg);
  z-index: 9999;
  pointer-events: none;
}
 
#page-animate.is-slide-in::after {
  animation-name: slideIn;
  animation-duration: 0.8s;
}
 
#page-animate.is-slide::after {

  animation-name: slideOut;
  animation-duration: 0.8s;
  animation-fill-mode:forwards;
}

@keyframes slideIn {
  from {
    right:100%;
  }
  to {
    right:0;
  }
}

@keyframes slideOut {
  from {
    left: 0;
  }
  to {
    left: 100%
  }
}

jQuery(function($){
 
  $(function() {
    // ハッシュリンク(#)と別ウィンドウでページを開く場合は実行しない

    $('a:not([href^="#"]):not([target])').on('click', function(e){
      e.preventDefault();         // ページ遷移を一旦キャンセル
      url = $(this).attr('href'); // 遷移先のURLを取得
  
      if (url !== '') {
        $('body').removeClass('is-slide'); 
        $('body').addClass('is-slide-in'); // 画面遷移前のアニメーション is-slide-in
  
        setTimeout(function () {
          window.location = url;  // 0.7秒後に取得したURLに遷移
        }, 700);
      }
      return false;
    });

  });
  
});

ちなみにbodyにis-slideのクラスを追加するのは

JavaScriptでは挙動が若干おかしかったので

add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
	// class名
	$classes[] = 'is-slide';
	return $classes;
}

これで解決しました。

悩んで解決した時の達成感！

この記事を書いた人

iwa-shi

記事一覧