webサイトでページ遷移時にアニメーションが入るページをときどき見ます。
アニメーションがあると訪れたユーザーにちょっとしたインパクトを与えてサイトの印象を残すことができると思います。
今のところPRサイトとかちょっと凝ったおしゃれなサイトにしか使われていないようですが思ったよりやり方が簡単だったのでやってみました。
カーテンのような感じでページ遷移時に開閉アニメーションします。
javascriptでaタグのクリックイベントを変える
（※この部分はページ遷移直前にもアニメーションを入れる場合にだけ必要です。遷移直前にアニメーションを入れないのであればこの処理は必要ありません。）
ページ遷移はリンクをクリックしたときにおこるものなので、aタグをクリックした際にすぐにリンク先に移動せずに演出終了後にリンク先に飛ぶようにする必要があります。
なのでまずjavascriptでページ内にあるaタグを抽出してイベントリスナーとsetTimeoutを使ってリンクへの移動のタイミングを変更します。preventDefault()を使うとaタグのリンクが無効になるようです。
target=_blankになっているリンクは除きたいのでtarget属性を持っているリンクは無視します。
function setTransitionCurtain(){
const elms = document.querySelectorAll("a");
for(let i = 0; i < elms.length; i++){
const elm = elms[i];
if(elm.getAttribute("target")){
continue;
}
elm.addEventListener("click", function(e){
e.preventDefault();
document.getElementById("curtain").classList.add("close");
setTimeout(function(){
window.location = elm.href;
}, 400);
});
}
}
クリックしたら#curtainに.closeを追加して0.4秒後にurlに飛ぶようになっています。
CSSでアニメーション演出を追加
アニメーションはスライドやスケールを使う程度のシンプルなものがいいかと思います。
とはいえそれだけではなんとなく寂しいので画像を用意してカーテンのように見せてみます。
まずは幅高さが100％の要素を用意します。カーテンの画像はbackground-imageを使って表示します。
仕組みとしてはこの要素を画面外にスライド、もしくは画面端に向けて縮小させればカーテンのようになります。ここはcssを使って作ります。
#curtain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0066CC;
background-image: url("curtain.png");//自分で用意した画像のurlね
background-repeat: repeat-x;
background-size: auto 100%;
z-index: 9999; /* 一番手前に */
pointer-events: none;
transform-origin: left;
transform: scaleX(0);
transition: all .4s ease;
text-align: center;
}
#curtain.close {
transform: scaleX(1);
}
scale()を使って.closeがついているときに#crutainが見えている状態、.closeをとると#curtainが消えるようにしています。
でこの#curtainをbody内のどこかに作っておきます。
<div id="curtain" class="close"></div>
あとは画面表示時に.closeを消すとカーテンが開き、ページ移動時に.closeを追加するとカーテンが閉まるようにjavascriptを書きます。
window.addEventListener("DOMContentLoaded", function(){
//画面遷移用カーテンを消す
document.getElementById("curtain").classList.remove("close");
//画面遷移用カーテンをセット
setTransitionCurtain();
}
ブラウザバック時の対応
ブラウザの戻るボタンを押すとカーテンが閉まったままになってしまうので戻った場合も.closeを取り除くようにしておきます。
window.addEventListener("pageshow", function(event) {
document.getElementById("curtain").classList.remove("close");
});
やりすぎ注意
ページ遷移の演出なので凝りすぎるのはやめたほうがいいと思います。
どんだけすごいことができるとしても１秒以内でサクッと動いてユーザーにとって不快にならないように作るのがいいと思います。