blog

ページ推移ふわっと
[2025.2.1 Sat]

こんにちは！
こないだ行った温泉旅館の窓からの景色です⛄

WEBサイトのリンクをクリック→ページ推移の際になんのアニメーションも入っていないとベタっとした垢ぬけない印象になってしまうので、ふわっとページ推移させるとなんかいい感じになりますよ♪笑
studioっていうCMSにはデフォルトで入っているみたいなので需要は高いかと思います！

jQueryを使用したソースコードをご紹介🙋🏻‍♀️

デモページURL

＜HTML＞※省略
<head>
 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>

<body class=”fade-out”>
</body>

＜CSS＞※省略
body {
transition: opacity 0.8s ease;
}

body.fade-out {
opacity: 0;
}

＜ｊｓ＞
$(document).ready(function () {
console.log(“DOM が準備できました。fade-out クラスを削除します。”);
$(‘body’).removeClass(‘fade-out’);
});

console.log(“JavaScript ファイルが読み込まれました。”);

// リンククリック時にフェードアウト
$(‘a:not([target]):not([href^=”#”])’).on(‘click’, function (e) {
e.preventDefault();
const url = $(this).attr(‘href’);
if (url) {
$(‘body’).addClass(‘fade-out’);
setTimeout(() => {
window.location.href = url;
}, 800); // フェードアウト後にページ遷移
}
});

$(document).ready(function () {
console.log(“jQuery が動作しています。”);
});

$(window).on(‘load’, function () {
console.log(“ページが完全に読み込まれました。”);
});


ｰｰｰｰｰｰｰｰｰｰ
body要素につけたfade-outクラスで透明にしといて、ページの情報が読み込まれたらそのクラスを0.8秒かけて外します。
また、リンクをクリックされてから0.8秒かけてfade-outクラス（透明）を付与したあと0.8秒後にページ推移します。
$(window).on(‘load’・・・ではうまくいかなかったので、readyを使っています。
0.8秒だとけっこうゆったりめなのでもうすこし早くてもいいかもです👌🏻


Back
Back