Comment Créer un Splash Screen ?

Un splash screen est une page d’accueil temporaire qui s’affiche pendant le chargement d’un site web ou d’une application. Pour les programmeurs en développement web, apprendre à créer un splash screen peut être un excellent moyen de se familiariser avec l’interaction entre HTML, CSS et JavaScript.

Dans ce tutoriel, nous allons vous montrer étape par étape comment créer un splash screen simple avec une animation de logo.

Nous allons diviser le code en trois parties : HTML pour la structure, CSS pour le style, et JavaScript pour l’interactivité.

HTML

La Structure de BaseLe code HTML ci-dessous crée un conteneur pour le splash screen, qui contient une image représentant le logo ou le visuel de votre choix.

<div id="alert">
    <div id="alert-box">
        <img src="https://newinformatique24.com/wp-content/uploads/2024/09/Picsart_24-01-25_14-18-57-401.png">
    </div>
</div>

CSS

Le Style du Splash ScreenLe CSS est utilisé pour styliser le splash screen et animer l’image.

Voici un exemple de code CSS pour appliquer un flou d’arrière-plan, centrer l’image et ajouter une animation d’opacité :

#alert {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    backdrop-filter: blur(10px);
    z-index: 999;
}

#alert-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #555;
    line-height: 100vh;
    display: flex;
    flex-direction: column;
}

#alert-box img {
    display: block;
    width: 100px;
    margin: auto;
    animation-name: annonce_opacity;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes annonce_opacity {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

Dans ce code, l’élément `#alert` couvre l’intégralité de l’écran avec un effet de flou en arrière-plan pour attirer l’attention sur l’animation.

L’animation d’opacité rend l’image plus vivante en créant un effet de clignotement.

JavaScript

La Gestion du Temps d’AffichageLe JavaScript est utilisé ici pour masquer le splash screen après un délai de 2,5 secondes (2500 millisecondes).

window.onload = function() {
    setTimeout(() => {
        document.getElementById("alert").style.display = "none";
    }, 2500);
}

Le script attend que la page soit entièrement chargée (`window.onload`), puis utilise une fonction `setTimeout` pour masquer l’élément `#alert` en définissant sa propriété `display` sur `none`.

En ajustant les animations et les styles, vous pouvez personnaliser davantage votre splash screen pour l’adapter à l’identité de votre site ou application.

Essayez ce code, et amusez-vous à expérimenter d’autres effets pour rendre vos projets encore plus attrayants !

Code Source

Voici le code source et la demo de ce que nous venons de faire :

Télécharger le code source