ページ遷移のアニメーションを、ChatGPTにJavascriptを使用して、ソースコードで提案してもらいました。
utanJavaScriptでページ遷移に複雑なアニメーションを加える場合、どのような構造になりますか？
html, jsでソースコードを添えて説明ください。
JavaScriptを使用してページ遷移にアニメーションを加える場合、以下のような構造になります。HTMLではアニメーションを表示するための要素を配置し、JavaScriptではその要素に対してアニメーションを適用し、ページ遷移を制御します。
以下は、ページ遷移時にカーテンのような開閉アニメーションを実装する簡単な例です。この例では、リンクをクリックした際にカーテンが閉じ、その後新しいページに遷移するようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ遷移アニメーション</title>
<style>
/* アニメーション用のカーテンスタイル */
#curtain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform-origin: left;
transform: scaleX(0);
transition: transform .4s ease;
z-index: 9999;
pointer-events: none; /* クリックイベントを無視 */
}
/* カーテンが閉じるアニメーション */
#curtain.close {
transform: scaleX(1);
}
</style>
</head>
<body>
<!-- ページ遷移用のカーテン -->
<div id="curtain"></div>
<!-- リンク -->
<a href="次のページのURL">次のページへ</a>
<script>
// ページ遷移用カーテンをセットする関数
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); // アニメーションの時間に合わせる
});
}
}
// DOMが読み込まれたらカーテンを開く
window.addEventListener('DOMContentLoaded', function() {
document.getElementById('curtain').classList.remove('close');
setTransitionCurtain();
});
// ブラウザバック時にカーテンを開く
window.addEventListener('pageshow', function(event) {
if (event.persisted || (window.performance && window.performance.navigation.type == 2)) {
document.getElementById('curtain').classList.remove('close');
}
});
</script>
</body>
</html>このコードでは、#curtainというIDを持つdiv要素がカーテンとして機能し、リンクがクリックされたときに.closeクラスが追加され、カーテンが閉じるアニメーションが発生します。アニメーションが完了した後に、setTimeout関数を使用して新しいページに遷移します。
この例は基本的なものですが、より複雑なアニメーションやページ遷移の制御を行いたい場合は、JavaScriptのライブラリを使用するか、requestAnimationFrameを使ったアニメーション制御など、さらに高度なテクニックが必要になることがあります。必要に応じて、これらのリソースを参考にしてください。もし具体的な実装について質問があれば、お気軽にお尋ねください。サポートいたします！
実際にHTMLファイルを作成して試してみると、リンククリック後にカーテンが閉じるようなアニメーションができていました。
WEBエンジニアとして活動しています。 実際に使用してみたプロンプトで良いものがあれば投稿していこうと思います。
