Fog Layer
Deux pseudo-éléments CSS dérivent en sens opposés sur une piste 200 % pour simuler un brouillard semi-transparent en boucle — pur CSS, zéro JavaScript.
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
.fog-container::before et ::after créent deux voiles indépendants. Chaque voile est un rectangle virtuel de largeur 200 % positionné à left: -50% de son parent — un décalage d'une largeur de conteneur. L'animation @keyframes fogDrift applique translateX(-25%) → translateX(25%), soit un déplacement de 50 % de la largeur propre de l'élément, c'est-à-dire exactement une largeur de conteneur d'un côté à l'autre. Combiné à un gradient horizontal symétrique (transparent aux bords), la boucle est invisible à l'œil nu.
Le gradient horizontal de chaque voile simule la densité du brouillard : plages transparentes aux extrémités, pics d'opacité blanche au centre (rgba(255,255,255,.08) pour ::before, .10 pour ::after). Les valeurs restent délibérément proches de la transparence totale — l'effet est vaporeux, pas couvrant.
La profondeur naît de deux différences entre les couches : ::before occupe 100 % de la hauteur et se déplace en 8s linear infinite ; ::after occupe 60 % de la hauteur, démarre à top: 30% (banc de brouillard concentré en position médiane), tourne à 12s linear infinite reverse avec un délai de -4s. La direction inversée et la vitesse différente produisent une dérive croisée qui donne l'illusion de volume tridimensionnel.
Accessibilité
- prefers-reduced-motion absent : l'effet ne lit pas la préférence système — les animations tournent en permanence quelle que soit la configuration OS. Pour un contexte accessible, ajoutez vous-même :
@media (prefers-reduced-motion: reduce) { .fog-container::before, .fog-container::after { animation: none; } }. - Le
.fog-containerne porte aucun rôle ARIA dans le code livré — pour un usage purement décoratif, ajoutezaria-hidden="true"sur l'élément afin que les lecteurs d'écran ignorent les pseudo-éléments animés. - Le contenu superposé (
.fog-content) est enposition: relative; z-index: 3et reste dans le flux normal — les lecteurs d'écran y accèdent sans obstacle. - Contraste : les voiles sont très faibles (opacité max 10 %) sur fond sombre — l'effet ne détériore pas le contraste du texte overlay, mais vérifiez votre ratio texte/fond indépendamment de l'effet.
- Aucune interaction clavier ou pointeur n'est gérée — pas de focus trap, pas de gestionnaire d'événements, impact zéro sur la navigation.
Compatibilité navigateur
Nécessite CSS animation, linear-gradient et pseudo-éléments — supportés dans tous les navigateurs modernes depuis 2012. Zéro dépendance externe.
Sur un navigateur très ancien sans support <code>animation</code>, <code>.fog-container</code> reste visible avec son gradient de fond statique — aucune erreur JS (il n'y a pas de JS), le contenu superposé est intact.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="fog-container">
<!-- pseudo-éléments ::before et ::after gérés entièrement par le CSS -->
</div>
<!-- contenu superposé (optionnel) -->
<span class="fog-content">Votre texte</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 |
|---|---|---|
| animation-duration sur ::before | 8s | Vitesse du premier voile. 5s = brouillard agité ; 20s = nappe très lente et apaisante. |
| animation-duration sur ::after | 12s | Vitesse du second voile (couche basse). Gardez un ratio ≠ 1 avec le premier pour éviter la synchronisation qui casse l'illusion de profondeur. |
| animation-delay sur ::after | -4s | Déphasage de départ du second voile. Une valeur négative lance immédiatement au milieu du cycle — modifiez-la pour décaler la position initiale du brouillard visible au chargement. |
| rgba opacity dans le gradient de ::before | 0.03 / 0.08 / 0.05 / 0.02 | Densité du premier voile. Montez toutes les valeurs uniformément (ex. 0.06/0.16/0.10/0.04) pour un brouillard épais ; descendez pour une brume quasi invisible. |
| height et top sur ::after | 60% / top 30% | Hauteur et position verticale du second voile. Passez à top: 50%; height: 50% pour concentrer le brouillard dense dans la moitié basse, ou top: 0; height: 100% pour deux voiles couvrants. |
| background sur .fog-container | linear-gradient(#1a1a2e → #16213e) | Couleur de fond de la scène. Remplacez par votre gradient brand — les voiles blancs se superposent quelle que soit la teinte. |
| animation-direction sur ::after | reverse | Supprimez reverse pour que les deux voiles dérivent dans le même sens — effet de courant ou de vent plutôt que de tourbillon croisé. |
FAQ
left: -50%. L'animation déplace chaque voile de translateX(-25%) à +25% de sa propre largeur — exactement une largeur de conteneur d'un bord à l'autre. Comme le gradient horizontal est symétrique (transparent aux deux extrémités), le raccord entre la fin et le début du cycle est totalement invisible.rgba(255,255,255,…) par rgba(R,G,B,…) dans les gradients des deux pseudo-éléments — ex. rgba(100,160,255,0.10) pour un brouillard bleu glacé. Ajustez également le background de .fog-container pour que la teinte du fond soit cohérente avec celle du voile.
