今回は、熊本県のホテル「天ノ寂」さんで実装されている、遷移時に雲のようなモヤが左から右へスライドしながら全体を覆い、その後ページが切り替わるという演出。
熊本県のホテル「天ノ寂」さん。ページ切り替え時のフワッとしたエフェクトが良いですね。どうやって実装するのか、今度試してみよう。 pic.twitter.com/LI8FxuKZFf
— 本間智久 / ウェブデザイナ (@mame_production) July 1, 2025
こちらの演出を再現してみようと思います。
実装の概要
今回のアニメーション、動作を分解してみると…
- リンクをクリックすると、白いモヤがふわっと左から右に現れて全体を覆いページが切り替わる
- ページを開いた直後に、白いモヤが左から右へスライドして消える
作成したコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ1</title>
<link rel="stylesheet" href="css/fade.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body id="page1">
<!-- スライドアニメーション用オーバーレイ -->
<div id="fade-overlay" class="in"></div>
<!-- コンテンツ -->
<h1>page1</h1>
<p><a href="page2.html">page2へ移動</a></p>
<script src="js/fade.js"></script>
</body>
</html>
CSS
body {
margin: 0;
font-family: sans-serif;
background-size: cover;
width: 100%;
height: 100vh;
}
body#page1{
background-image: url(../img/40301_s.jpg);
}
body#page2{
background-image: url(../img/3328965_s.jpg);
}
/* フェードオーバーレイ本体 */
#fade-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
/* 擬似要素に背景とアニメーション */
#fade-overlay::before {
content: "";
position: absolute;
top: 0;
left: -200%;
width: 300%;
height: 100%;
background-image: url(../img/bg_white.png);
background-size: cover;
opacity: 0;
transition: none;
}
/* フェードイン（読み込み時にスライドアウト） */
#fade-overlay.in::before {
animation: slideOutRight 1.5s ease-out forwards;
}
/* フェードアウト（リンククリック時にスライドイン） */
#fade-overlay.out::before {
animation: slideInRight 1.5s ease-in forwards;
transform: scale(-1, -1);
}
/* 左→右へスライドイン */
@keyframes slideInRight {
0% {
left: -300%;
opacity: 1;
}
50% {
left: 0;
opacity: 1;
}
100% {
left: 0%;
opacity: 1;
}
}
/* 左→右へスライドアウト（消える） */
@keyframes slideOutRight {
0% {
left: -100%;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 100%;
}
}jquery
$(window).on('load', function () {
$('#fade-overlay').removeClass('out').addClass('in');
});
$(function () {
$('a:not([href^="#"]):not([target])').on('click', function (e) {
e.preventDefault();
const url = $(this).attr('href');
if (url) {
// オーバーレイアニメーション
$('#fade-overlay').removeClass('in').addClass('out');
// 遷移処理
setTimeout(() => {
window.location.href = url;
}, 1500); // アニメーションと合わせる
}
});
});