JavaScriptとCSSを使用してフェードインページ遷移効果を作成する方法
序章
ページ遷移効果は、アプリケーションのユーザーエクスペリエンスに視覚的な美学を提供します。 JavaScriptは、ドキュメントオブジェクトモデルがロードされたことを検出し、CSSトランジションを適用して「フェードイン」効果を作成するクラスを追加または削除するために使用できます。
この記事では、JavaScriptとCSSを使用してページをフェードインする方法について学習します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
classListオブジェクトを理解することをお勧めしますが、必須ではありません。classListオブジェクトの詳細については、JavaScriptでCSSクラスを変更する方法チュートリアルをご覧ください。
ステップ1— CSSopacityおよびtransitionを使用する
まず、ページを開いたときとページをフェードインしたときのCSSルールを作成する必要があります。 この効果は、opacityおよびtransitionプロパティに依存します。 body要素のfadeクラスを追加および削除することにより、不透明度を0から1に遷移させることができます。
index.html
<head>
<style>
body {
opacity: 1;
transition-duration: 0.7s;
transition-property: opacity;
}
body.fade {
opacity: 0;
}
</style>
</head>
作成するフェードインコードは、fadeクラスをbody要素にすばやく適用し、不透明度がないように設定します（0）。 ページが読み込まれると、body要素からfadeクラスが削除され、0.7の期間中、完全な不透明度（1）に設定されます。秒。
ステップ2—フェードインクラスを適用する
ページで、開始bodyタグの直後に、fadeクラスをbody要素に割り当てます。
index.html
<body>
<script>
document.body.className = 'fade';
</script>
<!-- ... -->
</body>
または、body要素に既存のクラスが含まれている場合は、classListオブジェクトで.add()メソッドを使用してfadeクラスを適用できます。
index.htmlファイルで、.add()メソッドをclassListオブジェクトに追加し、fadeクラスを引数として挿入します。
index.html
<body>
<script>
document.body.classList.add('fade');
</script>
<!-- ... -->
</body>
これにより、fadeクラスが既存のクラスに追加されます。
ステップ3—フェードインクラスを削除する
クラスからフェードイン遷移を削除するために、ドキュメントオブジェクトモデルがロードされたときのイベントリスナーを実装できます。 トランジション効果がリーダーに表示されるように、遅延を実装することもできます。
index.htmlファイルで、イベントリスナーを使用し、body要素のクラス名に空の文字列の値を割り当てます。
index.html
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.className = '';
}, 230);
});
</script>
</body>
空の文字列は、ページが読み込まれた後にクラス名を元に戻すようにJavaScriptに指示します。
または、body要素に既存のクラスが含まれている場合は、classListオブジェクトで.remove()メソッドを使用します。
index.html
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.classList.remove('fade');
}, 230);
});
</script>
</body>
.remove()メソッドは、fadeクラスを削除します。
これで、ページをロードすると、最初にfadeクラスがbody要素に追加されます。 CSSトランジションは、0.7秒の間に不透明度を0から1に変更し始めます。 ページの読み込みが完了すると、fadeクラスがbody要素から削除されます。
結論
この記事では、JavaScriptとCSSの組み合わせを使用して、ページが読み込まれたときに「フェードイン」効果を作成しました。 opacityとtransitionを使用してエフェクトを作成しました。 次に、DOM操作を使用して、遷移をトリガーするクラスを追加および削除しました。
