Starfield
Champ d'étoiles en CSS 3D pur — chaque étoile jaillit du centre grâce à la perspective et une durée d'animation aléatoire, simulant un voyage à vitesse lumière.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur les transformations CSS 3D. Le conteneur .starfield-container porte perspective: 500px, ce qui crée un point de fuite au centre. Chaque étoile est un <div class="star"> de 2×2 px — un cercle blanc en position: absolute — positionné par des valeurs left et top proches du centre via l'attribut style inline.
L'animation @keyframes starMove propulse chaque étoile de translateZ(0) scale(0.1) à translateZ(500px) scale(2) en boucle infinie linear. Avec la perspective du parent, ce déplacement en Z crée l'illusion d'un astre qui surgit du lointain, grossit et disparaît hors-champ. L'opacité monte de 0 à 1 entre 0 % et 10 % du cycle, puis redescend de 1 à 0 entre 90 % et 100 % — évitant tout saut brusque au recommencement de la boucle.
Chaque étoile reçoit une animation-duration différente via son style inline (de ~1,7 s à ~3,5 s dans l'implémentation de référence). Ce décalage de durée, combiné à des positions légèrement différentes autour du centre, génère un flux radial asynchrone sans aucun calcul JavaScript côté animation. Un décalage de phase négatif (animation-delay) permet de démarrer les étoiles à des instants différents du cycle, évitant l'effet de démarrage synchronisé.
L'effet est 100 % CSS pour le mouvement ; les étoiles doivent toutefois être présentes dans le DOM à l'initialisation. Dans l'implémentation de référence, elles sont soit codées en dur dans le HTML, soit générées par un court script d'initialisation qui crée les <div class="star"> avec positions et durées aléatoires via style inline. Aucun requestAnimationFrame ni canvas n'est utilisé.
Accessibilité
- prefers-reduced-motion : le code ne contient aucune vérification de
prefers-reduced-motion— les animations CSS CSS s'exécutent même si l'utilisateur a demandé la réduction de mouvement. Correction : envelopper les règles d'animation.stardans@media (prefers-reduced-motion: no-preference) { ... }. - Le conteneur
.starfield-containerne porte nirole, niaria-label, niaria-hiddendans le code source. Pour les lecteurs d'écran, ajouterrole="img" aria-label="Champ d'étoiles animé"sur le conteneur etaria-hidden="true"sur les.starindividuels. - Le texte
.starfield-textutilisergba(255,255,255,0.5)sur fond noir (#000), soit un ratio de contraste ≈ 3,2:1 — en dessous du seuil WCAG AA (4,5:1) pour du texte normal. Augmenter l'opacité à 0,85 ou plus si le texte est porteur d'information. - L'effet est purement décoratif et n'a aucune interaction clavier. Si le champ d'étoiles sert de fond à un CTA, s'assurer que le CTA est focusable et que son contraste est conforme.
- Les
<div class="star">sont vides et sans sémantique — les lecteurs d'écran les ignorent naturellement, ce qui est le comportement attendu.
Compatibilité navigateur
Nécessite les transformations CSS 3D (perspective, translateZ, scale) et @keyframes — supportés dans tous les navigateurs modernes. Zéro dépendance JavaScript pour l'animation.
Sans support des transformations 3D (navigateurs très anciens), les étoiles restent visibles et statiques à leur position initiale — aucune erreur bloquante, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="starfield-container" id="starfieldContainer" role="img" aria-label="Champ d'étoiles animé — voyage spatial">
<!-- Étoiles : chaque div.star reçoit left, top et animation-duration en inline style.
Générer 80–200 éléments pour un résultat dense. -->
<div class="star" style="left: 268px; top: 178px; animation-duration: 2.4s;"></div>
<!-- … répéter pour chaque étoile … -->
<!-- Overlay texte optionnel -->
<span class="starfield-text">Texte optionnel</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Nombre de div.star | ~4 dans l'exemple minimal | Ajouter des <div class="star"> dans le HTML (ou via JS à l'init) augmente la densité. 80–200 étoiles donnent un résultat dense et réaliste ; en dessous de 30, l'espace paraît vide. |
| animation-duration (inline) | 1,7 s – 3,5 s (aléatoire par étoile) | Durées courtes (1–2 s) = sensation vitesse lumière ; durées longues (4–6 s) = dérive lente. Plus la variance est grande, plus le champ semble tridimensionnel et naturel. |
| perspective sur .starfield-container | 500px | Réduire (300 px) accentue la distorsion et la vitesse perçue ; augmenter (800 px) donne un mouvement plus doux. Modifier dans le CSS, ligne perspective: 500px. |
| translateZ dans @keyframes starMove | 0 → 500px | Augmenter la valeur finale (ex. 800 px) prolonge la trajectoire visible — combiner avec une perspective plus haute pour maintenir la vitesse perçue. |
| width / height sur .star | 2px × 2px | 3–4 px pour des étoiles plus visibles ; 1 px pour un effet poussière cosmique. Ajouter box-shadow: 0 0 4px #fff crée un halo lumineux sans modifier la taille de l'élément. |
| background de .starfield-container | #000 (noir pur) | Un dégradé radial (radial-gradient(ellipse at center, #0d1b2a 0%, #000 70%)) donne une profondeur plus réaliste et évite le fond « trop plat ». |
| left / top des div.star | Groupés près du centre (~W/2, ~H/2) | Le point de fuite de la perspective est au centre du conteneur. Les étoiles distribuées dans un rayon de 0 à ~20 % de la diagonale autour du centre produisent un flux radial équilibré. Les concentrer davantage crée un tunnel étroit ; les disperser produit des traînées presque parallèles. |
FAQ
@keyframes, perspective, translateZ) — aucun JS n'est requis pour le mouvement. En revanche, les étoiles doivent exister dans le DOM. Elles sont soit codées en dur dans le HTML, soit générées par un court script d'initialisation qui crée des <div class="star"> avec des valeurs left, top et animation-duration aléatoires en style inline — une dizaine de lignes suffisent.perspective CSS : le point de fuite est par défaut au centre du conteneur (perspective-origin: 50% 50%). Les étoiles positionnées légèrement autour de ce centre paraissent se propulser vers les bords au fur et à mesure qu'elles avancent en Z, reproduisant exactement le warp speed d'un vaisseau spatial. Pour décaler le point de fuite, modifier perspective-origin sur .starfield-container.style inline de chaque <div class="star"> : background: #a0d8ef pour une teinte bleue-froide, width: 3px; height: 3px pour agrandir, ou box-shadow: 0 0 3px 1px rgba(200,220,255,0.8) pour un halo. Des classes utilitaires (ex. star star--blue star--lg) permettent de définir des variantes dans la feuille CSS sans multiplier les attributs inline.
