BLOG

ブログ

programming

かんたんなページ遷移アニメーションの作り方【iOSのブラウザバックにも対応】

こんにちは、ティウェブ藤園です。

最近、「オープニングアニメーション」や「ローディングアニメーション」をはじめとして、アニメーションに凝っているWebサイトが増えてきていますね。

写真がきれいだったり、アニメーションを上手に駆使しているWebサイトは、それだけでユーザーにとって”魅力的なWebサイト＝魅力的な企業や製品”という印象を与えることができます。
私個人としては、新しいデザイン・技術を使っているWebサイトは、直近にリニューアルが行われていたりすることが多いので、それだけでしっかりとした保守や管理がなされている印象があって、安心感を得たりすることも多いです😊

ティウェブでも、より魅力的なWebサイトにするため、それぞれのデザインに合ったアニメーションをつけて、より”リッチな体験”を提供する機会が増えています。

今回は、汎用性が高く、ベーシックな「スライドフェードイン／アウトするページ遷移アニメーション」の作り方をご紹介します。

完成形

まず、完成形を下記のリンクからご覧ください。

デモページ

HTML＋JavaScript（このJavaScriptは＜body＞直後がオススメです）

<html>
<head>
	<!-- 省略 -->
</head>
<body class="is_fade">

<!-- JS -->
<script>
var fixLoad = function(){
	document.body.classList.remove("is_fade");
	document.body.classList.remove("is_remove");
} 
setTimeout(fixLoad, 1000);
</script>

<div class="md_transition"></div>

<p>ページの内容</p>

</body>
</html>

CSS

.md_transition {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform .8s cubic-bezier(.39, .575, .565, 1) 0.8s; // ここの最後の0.8sを増減するとアニメーションの開始タイミングを変更できます
	z-index: 999999;
}
.md_transition::before {
	background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0)), color-stop(33.33333%, #fff), color-stop(66.66667%, #fff), to(hsla(0, 0%, 100%, 0)));
	background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0) 0, #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0) 100%);
	background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0));
	content: "";
	display: block;
	width: 100%;
	height: 300%;
	position: absolute;
	left: 0;
	top: -100%;
}
body.is_remove .md_transition {
	-webkit-animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
	animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
}
body:not(.is_fade) .md_transition {
	transform: translateY(-200%);
}
@-webkit-keyframes maskCloseTransition {
	0% { transform: translateY(200%); }
	to { transform: translate(0); }
}
@keyframes maskCloseTransition {
	0% { transform: translateY(200%); }
	to { transform: translate(0); }
}

.md_transitionのtransition-delayを遅らせて、別途ローディングアニメーションを加えてからフェードインさせるのもいいと思います。

JS（このJavaScriptは別ファイルや</body>直前などでも支障ありません。）

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

'a:not([href^="#"]):not([target])'のところで、リンクをクリックした際にアニメーションが起こるようにしています。

iOS系の対策

上記のみで基本的には問題ないのですが、iOS系のSafariでは、ブラウザバックしたとき、$('window').on('load', function(){ ... });（ページの読み込みが完了したら）といったイベントがうまく動作しません。

JavaScriptのイベントハンドラにはload以外にもいろいろなものがあるのですが、iOS系のSafari対策にはpopstateを利用します。

JS（このJavaScriptは別ファイルや</body>直前などでも支障ありません。）

var fixLoad = function(){
	document.body.classList.remove("is_fade");
	document.body.classList.remove("is_remove");
} 
history.replaceState(null, document.getElementsByTagName('title')[0].innerHTML, null);
window.addEventListener('popstate', function() {
	fixLoad();
}, false);

まとめ

先述の通り、アニメーションは”リッチな体験”を届けることができるもので、紙媒体などにはないWebならではの表現方法です。

きれいな写真を大きくたくさん載せるかたちのWebデザインが増えていますが、業種によっては映える写真が用意できなかったりして、テキストの羅列になって物足りないということもしばしばあるかと思います。

アニメーションは、濫用は厳禁ですが、デザイン的に何か物足りなかったり、情報がわかりにくいと感じるときに、少し加えるだけでよりユーザーに見やすく・わかりやすく情報を届けることができるので、上手に取り入れてみてはいかがでしょうか。

ティウェブでは、お客様がWebサイトに掲載したい内容に合わせて様々なご提案をさせていただきますので、Webサイト制作で気になることがありましたらぜひご相談くださいませ。

CATEGORY