Starry Night
Ciel étoilé CSS pur : 50 étoiles scintillantes et 3 étoiles filantes animées par keyframes, sans canvas ni dépendance.
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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur CSS et 50 <div class="star"> (dont ~20 % portent la classe star-large) positionnés en absolu dans un conteneur .bg-starry avec un dégradé linéaire #0a0a0f → #1a1a2e. Aucun canvas, aucune librairie.
Le scintillement est produit par @keyframes twinkle : chaque étoile oscille entre opacity 0.3 et opacity 1 tout en passant de scale(1) à scale(1.2). Le JS assigne un animation-delay (0–3 s) et une animation-duration (2–4 s) aléatoires à chaque étoile pour qu'elles ne clignotent pas en chœur. Les étoiles larges ajoutent un box-shadow blanc diffus pour simuler la magnitude.
Les trois étoiles filantes (.shooting-star) sont de fines bandes de 100 × 2 px avec un dégradé blanc → transparent. L'animation @keyframes shoot les déplace de 200 px en X et 100 px en Y en faisant fondre leur opacité. Un pseudo-élément ::before de 6 × 6 px avec box-shadow forme la tête lumineuse. Les délais sont échelonnés (j × 3 + aléatoire) pour éviter les apparitions simultanées.
Le JS s'exécute dans un IIFE qui cible document.getElementById('starryBg') et injecte programmatiquement étoiles et filantes via createElement / appendChild. Aucune boucle RAF, aucun listener : après l'injection initiale, toute l'animation est pilotée par le moteur CSS du navigateur — charge CPU nulle au runtime.
Accessibilité
- prefers-reduced-motion absente : le code ne détecte pas cette préférence OS. Pour un site grand public, ajouter
@media (prefers-reduced-motion: reduce) { .star, .shooting-star { animation: none; } }pour figer les animations. - Le conteneur
.bg-starryne porte pas d'attributaria-hiddenpar défaut — ajouteraria-hidden="true"si l'effet est purement décoratif pour que les lecteurs d'écran l'ignorent. - Fond sombre (
#0a0a0f) : du texte blanc en overlay obtient un ratio de contraste ≥ 15:1 (WCAG AAA) sans effort supplémentaire. - Aucun élément interactif dans l'effet — pas de gestion de focus à implémenter, la page reste entièrement navigable au clavier.
- Les
<div>d'étoiles sont des nœuds DOM sans rôle ni texte : ils sont transparents aux technologies d'assistance.
Compatibilité navigateur
Nécessite CSS Animations et position absolute — supportés dans tous les navigateurs modernes depuis 2015.
Si JS est désactivé, le HTML prérendu (50 étoiles et 3 filantes avec inline styles) reste affiché et les animations CSS tournent — seule la randomisation des positions à chaque rechargement est absente.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-starry" id="starryBg" style="width:100%;min-height:300px;">
<!-- Le JS injecte les .star, .star-large et .shooting-star -->
<!-- Facultatif : contenu overlay en position absolute + z-index > 0 -->
</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 d'étoiles (boucle JS i < 50) | 50 | Changer 50 pour ajuster la densité : 30 = ciel épuré, 100 = voie lactée dense. |
| Proportion star-large (seuil JS 0.8) | 0.8 | Modifier Math.random() > 0.8 : 0.5 donne 50 % de grandes étoiles brillantes, 0.95 en donne ~5 % pour un ciel minimaliste. |
| Nombre d'étoiles filantes (boucle JS j < 3) | 3 | Changer 3 : 1 pour discret, 6 pour une nuit de météorites. |
| Couleurs du ciel (CSS .bg-starry background) | #0a0a0f → #1a1a2e | Remplacer les deux stops du gradient : #050820 → #0a1545 pour un bleu nuit, #0d0010 → #1a0028 pour un violet profond. |
| Longueur de la traînée (CSS .shooting-star width) | 100px | 60 px = trait discret, 200 px = longue traînée spectaculaire. |
| Distance de vol (CSS @keyframes shoot 20%) | translateX(200px) translateY(100px) | Ajuster les valeurs du keyframe 20% pour changer la direction et l'amplitude du vol de chaque filante. |
FAQ
<div> en position absolue et des animations CSS keyframes. Aucun canvas, aucun WebGL, aucune dépendance npm — copiez le HTML, le CSS et le JS et c'est prêt.for (var j = 0; j < 3; j++) en remplaçant 3 par le nombre souhaité (ex. 6). Les délais sont automatiquement échelonnés (j × 3 s) pour éviter les apparitions simultanées.
