Noise Overlay
Grain de film qui frémit sur n'importe quelle surface : un calque de bruit SVG à 15 % se décale d'un pixel toutes les 20 ms, sans une ligne de JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La surface .fgr-box (250×150 px par défaut, dégradé indigo vers violet) porte deux enfants : le calque .fgr-grain et votre contenu .fgr-content. Le calque est une image SVG embarquée en data: : un filtre feTurbulence de type fractalNoise (fréquence 0,8, 4 octaves) qui produit un bruit coloré fin. Aucune image externe n'est chargée.
Le grain vit grâce à l'animation fgr-move : en 0,2 s et 10 paliers (steps(10)), le calque glisse de 10 px vers le haut et la gauche, puis la boucle repart. Le motif saute donc d'un pixel toutes les 20 ms, comme le grain d'une pellicule qui défile. Le calque déborde de 10 px à droite et en bas pour que ce glissement ne découvre jamais de bande nue au bord.
Le contenu .fgr-content passe au-dessus du grain (z-index: 1) et reste parfaitement net : seul le fond est texturé. Tout se règle par variables CSS posées sur .fx-0256-root : taille, fond, arrondi, intensité et cadence du grain. Avec --fgr-w: 100% et --fgr-h: 100%, la surface remplit tout son conteneur, ce qui permet de texturer un haut de page entier.
Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux copies sur la même page tournent chacune de leur côté, rien n'est ajouté à window, aucune erreur. Le calque ne clignote pas (luminance moyenne constante, mesure image par image à 20 ms).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animationfgr-moveest coupée. Le grain reste affiché, figé : la texture est conservée, seul le frémissement disparaît. - Lisibilité : le grain est sous le contenu, jamais par-dessus. À 15 % il ne gêne pas la lecture ; au-delà de 40 % sur un fond clair, vérifiez le contraste de vos textes.
- Lecteurs d'écran : le calque porte
aria-hidden="true". Seul le texte de.fgr-contentest lu. Si la surface représente une image (pochette, photo), donnez-luirole="img"et unaria-label. - Clavier et toucher : rien à activer, l'effet est purement décoratif. Le calque a
pointer-events: none: les liens et boutons placés dans.fgr-contentrestent cliquables.
Compatibilité navigateur
CSS seul : variables CSS, @keyframes avec steps() et une image SVG feTurbulence en data:. Versions minimales d'après les données MDN (variables CSS : Chrome 49, Firefox 31, Safari 9.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu et animation identiques.
Sans variables CSS, la surface perd ses dimensions et son fond (navigateurs d'avant 2016). Si l'image SVG n'est pas rendue, la surface reste unie avec son contenu : rien ne casse.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0256-root">
<div class="fgr-box">
<div class="fgr-grain" aria-hidden="true"></div>
<span class="fgr-content">…</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--fgr-w / --fgr-h |
250px / 150px |
Taille de la surface texturée. 100% pour remplir le conteneur (la racine doit alors avoir une hauteur, voir --fgr-root-h). La largeur ne dépasse jamais celle de la racine. |
--fgr-bg |
linear-gradient(135deg, #6366f1, #8b5cf6) |
Fond sous le grain : couleur, dégradé ou photo (url(photo.jpg) center / cover). |
--fgr-opacity |
.15 |
Intensité du grain. Vers .3–.45 il se voit nettement, à .05 il devient une simple patine. |
--fgr-speed |
.2s |
Durée d'une boucle de 10 paliers. .4s donne un grain plus calme ; 1s un frémissement lent. |
--fgr-radius |
12px |
Arrondi des coins de la surface ; 0 pour un fond de section. |
--fgr-root-bg / --fgr-root-h |
#0a0a0f / 300px |
Fond et hauteur minimale de la racine qui centre la surface. transparent pour poser l'effet sur votre page, 0 pour que la racine épouse la surface. |
Contenu (HTML — .fgr-content) |
Texte « GRAIN » | Remplacez-le par n'importe quel contenu : titre, menu, bouton. Il passe au-dessus du grain et reste net. |
FAQ
background-size: 300px à .fgr-grain (le motif se répète alors en tuiles).fractalNoise produit du bruit sur les quatre canaux (rouge, vert, bleu, transparence). Pour un grain neutre, ajoutez filter: grayscale(1) sur .fgr-grain.transform par surface, que le navigateur confie à la carte graphique. L'image de bruit est calculée une fois puis seulement déplacée. Aucun JavaScript ne tourne.
