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