×

Créer un Splash Screen en HTML, CSS et JavaScript (Débutant)

Astuces & tutoriels Blog Html/css JavaScript , , ,

Créer un Splash Screen en HTML, CSS et JavaScript (Débutant)

Un Splash Screen est un écran d’accueil qui s’affiche quelques secondes avant le chargement du site ou de l’application.
On l’utilise souvent pour afficher :

  • Le logo
  • Le nom du site
  • Un message de chargement

Dans ce tutoriel, nous allons créer un Splash Screen simple et animé.

Prérequis

  • Bases en HTML
  • Bases en CSS
  • Bases en JavaScript

Structure HTML

Voici la structure complète :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Splash Screen HTML CSS JS</title>

    <style>
        /* ===== STYLE DU SPLASH SCREEN ===== */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .splash {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #1e3a8a, #020617);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            z-index: 9999;
        }

        .splash h1 {
            font-size: 36px;
            margin-bottom: 10px;
            animation: fadeIn 1.5s ease-in-out;
        }

        .splash p {
            font-size: 16px;
            opacity: 0.8;
        }

        .loader {
            margin-top: 20px;
            width: 40px;
            height: 40px;
            border: 4px solid #fff;
            border-top: 4px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        /* ===== CONTENU PRINCIPAL ===== */
        .contenu {
            display: none;
            padding: 40px;
        }
    </style>
</head>
<body>

Le Splash Screen (HTML)

<div class="splash" id="splash">
    <h1>New Informatique 24</h1>
    <p>Chargement en cours...</p>
    <div class="loader"></div>
</div>

Contenu principal du site

<div class="contenu" id="contenu">
    <h2>Bienvenue sur le site</h2>
    <p>Le contenu principal s’affiche après le Splash Screen.</p>
</div>

Le JavaScript

Ajoute ce script avant </body> :

<script>
    // Durée du splash screen (en millisecondes)
    setTimeout(function() {
        document.getElementById("splash").style.display = "none";
        document.getElementById("contenu").style.display = "block";
    }, 3000); // 3 secondes
</script>

</body>
</html>

Explication du fonctionnement

🔹 .splash

Couvre tout l’écran au chargement.

🔹 Animation CSS

  • spin : animation du loader
  • fadeIn : effet d’apparition du texte

🔹 setTimeout()

Cache le Splash Screen après 3 secondes.

Résultat final

  • Écran d’accueil animé pendant 3 secondes
  • Chargement fluide
  • Affichage du contenu principal ensuite

Tu peux :

  • Ajouter un logo (image)
  • Synchroniser avec le vrai chargement du site
  • Ajouter une barre de progression
  • Rendre le splash responsive mobile

Le Splash Screen est idéal pour :

  • Améliorer l’expérience utilisateur
  • Donner une identité visuelle à ton site
  • Apprendre les animations CSS et le timing JavaScript

Étiquette

Related Posts

You May Have Missed