Comment Créer un simple Splash Screen pour votre Site Internet

Un splash screen est un écran de démarrage qui apparaît brièvement lorsqu’un site web ou une application se charge. Il sert souvent à informer l’utilisateur que le contenu est en train de se préparer.

C’est aussi un moyen d’améliorer l’expérience utilisateur en masquant les éléments du site pendant leur chargement.

Dans cet article, nous allons expliquer comment créer un splash screen simple pour votre site web en utilisant le code source suivant.

Ce splash screen disparaîtra après 1,5 seconde, révélant ensuite le contenu de votre site.

Code Source

Le code source que nous allons utiliser est composé de trois parties principales : le CSS pour le style, le HTML pour la structure, et le JavaScript pour la gestion du temps d’affichage.

Html

Le code HTML structure votre page et inclut le splash screen :

<div id="alert">
	<div id="alert-box">
		<img src="https://newinformatique24.com/wp-content/uploads/2024/08/Imahggge1.png"> <!-- Image affichée pendant le chargement -->
	</div>
</div>

CSS

Le code CSS est utilisé pour styliser le splash screen et les animations :

/* Style du conteneur principal du splash screen */
#alert{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh; /* Prend toute la hauteur de la fenêtre */
	width: 100%; /* Prend toute la largeur de la fenêtre */
    backdrop-filter: blur(10px); /* Floute l'arrière-plan */
	z-index: 999; /* Assure que le splash screen est au-dessus de tout le contenu */
}

/* Style de la boîte centrale du splash screen */
#alert-box{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: #555; /* Couleur de fond de la boîte */
	line-height: 100vh; /* Centre le contenu verticalement */
	display: flex;
	flex-direction: column;
}

/* Style de l'image dans le splash screen */
#alert-box img{
	display: block;
	width: 100px; /* Taille de l'image */
	margin: auto; /* Centre l'image horizontalement */
	animation-name: annonce_opacity;
    animation-duration: 1s; /* Durée de l'animation */
    animation-timing-function: ease-in-out; /* Effet d'accélération/décélération */
    animation-iteration-count: infinite; /* L'animation se répète indéfiniment */
}

/* Définition de l'animation */
@keyframes annonce_opacity{
	0%{
		opacity: 1; /* L'image est complètement visible */
	}
	50%{
		opacity: 0.5; /* L'image devient à moitié transparente */
	}
	100%{
		opacity: 1; /* L'image redevient complètement visible */
	}
}

Javascript

Le code JavaScript gère l’affichage du splash screen et le fait disparaître après 1,5 seconde :

window.onload = function(){
	setTimeout(() => {
		document.getElementById("alert")
	    .style.display = "none"; /* Cache le splash screen après 1,5 seconde */
	}, 1500);
}

Explication du Code

Html

La structure HTML est simple : un `div` (`#alert`) qui contient un autre `div` (`#alert-box`) où l’image est placée.

Cette image est celle qui sera affichée pendant le chargement du site.

CSS (Cascading Style Sheets)

• #alert : Ce conteneur recouvre toute la fenêtre et utilise un filtre de flou sur l’arrière-plan pour attirer l’attention sur le contenu du splash screen.
• #alert-box : C’est l’élément central qui contient l’image. Il est centré à l’écran à l’aide de `line-height` et `flex`.
• #alert-box img : L’image est centrée dans la boîte et est animée pour créer un effet de clignotement doux, attirant ainsi l’attention de l’utilisateur.

JavaScript

Le script attend que la page soit entièrement chargée (`window.onload`) avant de lancer un minuteur (`setTimeout`) qui cache le splash screen après 1,5 seconde en modifiant son style (`style.display = « none »`).

En personnalisant l’image et les couleurs, vous pouvez l’adapter au style de votre site. Ce code simple est un point de départ, et vous pouvez l’améliorer en ajoutant des fonctionnalités ou des animations supplémentaires.

Télécharger le code source :