ページ遷移時にアニメーションをつける
お洒落なサイトでよく実装されているのが、「ページ遷移時のアニメーション」ですね。
例えば、企業のアイコンを表示させたり、画面をスライドさせたり、フェードインさせたり、様々なアニメーションをつけてユーザーを飽きさせないようにしてます。
（あまりやりすぎてるサイトは離脱率が上がりそうですが）
jQueryのプラグインで有名どころとしてはANIMSITIONですね。
今回は、プラグインを使用せず、ページ遷移時のアニメーションを実装してみます。
参考にしたサイト、は記事最下部にリンク貼っておきます。
ページ遷移時のアニメーション
まずは、デモを御覧ください。
→ デモサイト
こんな感じで、LINKをクリックした時にアニメーションが走るようになっています。
ページ読み込み時にも時間差でアニメーションを実行させると、見栄えが良さそうですね。
ざっくりこれからやることを説明しておくと、
bodyの擬似要素にアニメーション用のスタイルをあてる
aタグをクリックした時、is-slideを外す
is-slideが外れた時、擬似要素をアニメーションしてbodyを表示させる
HTML
<body class="is-slide" id="page-animate">
</body>body要素にクラスをつけて、CSSでアニメーションさせるシンプルなものです。
擬似要素にスタイルをあてて、スライドするようなアニメーションを作っていきます。
今回作るパーツは2つ。
画面遷移する前、bodyを隠すようにスライドする要素
画面遷移した後、bodyを表示するようにスライドする要素
それぞれbeforeとafterで作っていきます。
CSS
#page-animate::before {
content: '';
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #333;
z-index: 9999;
pointer-events: none;
right: 100%;
-webkit-transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-animate::after {
content: '';
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #333;
z-index: 9999;
pointer-events: none;
left: 100%;
-webkit-transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-animate.is-slide-in::before {
right: 0;
}
#page-animate.is-slide::after {
left: 0;
}
CSSはこれだけ。
is-slide-inは、リンクをクリックされた時に付与するクラスで、
このクラスをトリガーに、画面遷移前にbodyを隠すようにスライドします。
jQuery
// 画面が読み込まれた時、is-slideを外し、アニメーションさせる
$(window).on('load', function(){
$('body').removeClass('is-slide');
});
$(function() {
// ハッシュリンク(#)と別ウィンドウでページを開く場合は実行しない
$('a:not([href^="#"]):not([target])').on('click', function(e){
e.preventDefault(); // ページ遷移を一旦キャンセル
url = $(this).attr('href'); // 遷移先のURLを取得
if (url !== '') {
$('body').addClass('is-slide-in'); // 画面遷移前のアニメーション is-slide-in
setTimeout(function () {
window.location = url; // 0.7秒後に取得したURLに遷移
}, 700);
}
return false;
});
});
解説はコメントに書いている通りですが、
画面が表示された時にクラスを外し、bodyのafterをアニメーションさせます。
aタグをクリックされた時、is-slide-inクラスを付与して、アニメーションさせてbodyを隠しつつ、0.7秒後にはページ遷移します。
かなり短いコードですが、
これだけでページ遷移のアニメーションは実装できてしまうので、かなり簡単ですね。
少しでも参考になれば幸いです。
参考サイト
サポートいただければ嬉しいです。