BLOG

ブログ

programming

2021.06.11

かんたんなページ遷移アニメーションの作り方【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);