スプラッシュスクリーン を JavaScript で実装

はじめに

本記事では、JavaScript を使用して、Web ページの読み込み時に表示される「スプラッシュスクリーン」を実装しています。

スプラッシュスクリーンとは

スプラッシュスクリーンは、Web ページの読み込みが完了するまでの間、ユーザーに短いアニメーションやメッセージを表示する画面です。これにより、ユーザーに読み込み中のことを伝え、ストレスを軽減することができます。

実装

<div id="splash-screen" style="height: 100vh; width: 100vw; position: fixed; z-index: 999; top: 0; bottom: 0; left: 0; right: 0; display: flex;  align-items: center; justify-content: center; background-color: #00aee2; overflow: hidden;">
    <div style="font-size: 4rem;">ロゴ等</div>
</div>
<script>
    const delay = (ms) => {
        return new Promise((resolve) => {
            setTimeout(resolve, ms)
        })
    };

    const hideSplashScreen = async () => {
        await delay(1900);
        document.getElementById('splash-screen').style.display = 'none';
    };
    hideSplashScreen();
</script>

1. HTML
   • <div id="splash-screen">: スプラッシュスクリーンの要素を定義します。
   • height: 100vh; width: 100vw;: 画面全体を覆うようにサイズを指定します。
2. JavaScript
   • delay(ms) 関数: 引数で指定されたミリ秒間、処理を一時停止する関数です。
   • hideSplashScreen() 関数: スプラッシュスクリーンの表示を非表示にします。