L’objectif est d’afficher un écran de loading animé avec :
- un compteur qui monte jusqu’à 100%,
- une transition de texte (logo),
- des images qui entrent/sortent en animation,
- puis la disparition fluide du préchargeur pour afficher la page.
Ajouter le code dans Elementor
- Dans le tableau de bord WordPress, allez dans Elementor → Code personnalisé.
- Cliquez sur Ajouter un nouveau.
- Nommez-le par exemple “Préchargeur avec un compteur et une image”.
- Collez le code ci-dessous.
- Réglez l’emplacement sur
<head> - Publiez.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<style>
.layout {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100vh;
background: #101012;
display: flex; justify-content: center; align-items: center;
z-index: 10000;
}
.overlay-content { width: 85%; }
.images { position: relative; height: 50vh; }
.img-contain { position: relative; width: 40%; height: 100%; margin: 0 auto; z-index: 1000; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }
.img-contain img { position: absolute; top: 0; left: -110%; }
.text { position: relative; margin: 1em 0; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }
.counter, .logo p {
font-size: 10rem; text-align: center; text-transform: uppercase;
font-family: "Sora", Sans-serif; font-weight: 700;
}
.counter p { line-height: 100%; }
.counter p span, .logo p span { position: relative; z-index: 9999; color: white; }
.logo { position: absolute; top: 0%; left: 50%; transform: translateX(-50%); }
.logo p { line-height: 100%; }
.logo p span { position: relative; top: 200px; opacity: 0; }
</style>
<div class="layout">
<div class="overlay-content">
<div class="images">
<div class="img-contain">
<img src="https://images.pexels.com/photos/18131871/pexels-photo-18131871.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
<img src="https://images.pexels.com/photos/18398708/pexels-photo-18398708.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
<img src="https://images.pexels.com/photos/18131896/pexels-photo-18131896.jpeg?w=800&auto=compress&cs=tinysrgb" alt="" />
</div>
</div>
<div class="text">
<div class="counter"><p>100%</p></div>
<div class="logo"><p>HELLO</p></div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
splitTextIntoSpans(".logo p");
// entrée des images
gsap.to(".img-contain img", {
left: 0, stagger: 0.1,
ease: "power4.out", duration: 1.5, delay: 4,
});
// sortie des images
gsap.to(".img-contain img", {
left: "110%", stagger: -0.1,
ease: "power4.out", duration: 1.5, delay: 7,
});
});
function splitTextIntoSpans(selector) {
var element = document.querySelector(selector);
if (element) {
var text = element.innerText;
element.innerHTML = text.split("").map(char => `<span>${char}</span>`).join("");
}
}
function startLoader() {
var counterElement = document.querySelector(".counter p");
var currentValue = 0;
function updateCounter() {
if (currentValue === 100) { animateText(); return; }
currentValue += Math.floor(Math.random() * 10) + 1;
currentValue = currentValue > 100 ? 100 : currentValue;
counterElement.innerHTML =
currentValue.toString().split("").map(char => `<span>${char}</span>`).join("") + "<span>%</span>";
setTimeout(updateCounter, Math.floor(Math.random() * 200) + 100);
}
function animateText() {
setTimeout(() => {
gsap.to(".counter p span", { top: "-400px", stagger: 0.1, ease: "power3.inOut", duration: 1 });
gsap.to(".logo p span", { top: "0", opacity: 1, stagger: 0.1, ease: "power3.inOut", duration: 1 });
gsap.to(".logo p span", { top: "-400px", stagger: 0.1, ease: "power3.inOut", duration: 1, delay: 3 });
gsap.to(".layout", { opacity: 0, ease: "power3.inOut", duration: 1, delay: 4 });
}, 300);
}
updateCounter();
}
startLoader();
</script>Explications des éléments
.layout→ l’écran de préchargement plein écran..counter→ le texte qui affiche la progression..logo→ ton mot/logo qui apparaît puis disparaît..img-contain img→ les images animées en entrée et sortie.
Personnaliser facilement
Voici les parties du code que tu peux modifier :
- Changer les images : remplacer les URLs dans la balise
<img src="...">. - Changer le texte du logo : modifie le contenu de
<div class="logo"><p>HELLO</p></div>. - Durées et timings :
delay: 4→ quand les images apparaissent,delay: 7→ quand elles disparaissent,duration: 1.5→ durée de l’animation des images.
- Vitesse du compteur : ajuster les lignes
Math.floor(Math.random() * 200) + 100→ diminue les valeurs pour que le compteur aille plus vite. - Effet texte logo :
gsap.to(".logo p span", { top: "0", opacity: 1, ... })→ tu peux jouer avectop,opacityetease.
Conseils pratiques
- Compresse les images du préchargeur (sinon ça peut ralentir le site).
- Choisis un fond adapté (
background: #101012;) pour matcher avec ta charte graphique. - Si tu veux que le préchargeur ne s’affiche qu’une seule fois par session, tu peux ajouter un petit script avec
sessionStorage.
Créer avec Elementor
