Wave Path
Trois points violet, rose et cyan (14, 10 et 8 px) se suivent à une seconde d'écart sur une sinusoïde de deux ondulations, à vitesse constante, en 4 s : une petite file qui monte et descend les vagues sans que les écarts changent — CSS seul, zéro JavaScript, trois points posés sur la vague si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0037-root (fond #0a0a0f, 300 px de haut au minimum) centre une scène .mp-wave-scene de 300 × 200 px. Un <svg> y trace en blanc à 6 % une sinusoïde de deux ondulations complètes : quatre courbes de Bézier cubiques de 75 px de large, qui montent et descendent de 37,5 px autour de la ligne médiane y = 100. Trois div .mp-wave-dot reçoivent le même tracé en offset-path: path(…) et la même animation : offset-distance de 0 à 100 % en 4 s, linear, en boucle.
Ce qui fait la file, c'est le décalage. Le point violet #8b5cf6 de 14 px démarre à 0, le rose #ec4899 de 10 px a animation-delay: -1s, le cyan #06b6d4 de 8 px -2s : un délai négatif fait démarrer l'animation « en cours de route », le cyan est donc devant, le rose au milieu, le gros violet ferme la marche, chacun à un quart du trajet (111 px le long de la courbe) du suivant. Avec linear, la vitesse le long de la courbe est constante : les écarts ne bougent pas, même dans les montées. En fin de tracé, chaque point repart à gauche ; comme la vague finit à la hauteur où elle commence, ce retour est un saut horizontal d'un bord à l'autre.
Les points n'ont pas de marge négative : le navigateur pose leur centre sur le tracé, si bien que les trois passent exactement sur la ligne dessinée, quelle que soit leur taille (écart mesuré : 0,03 px dans Chromium 151, Firefox 153 et WebKit 26). Par défaut, offset-rotate vaut auto : chaque point tourne selon la pente. Sur un rond, cela ne se voit pas ; si vous y mettez une étiquette ou une icône, ajoutez offset-rotate: 0deg, comme dans la deuxième scène ci-dessus.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0037-rootarrête les trois points sur la vague, à 15, 40 et 65 % du tracé : le même écart d'un quart, une crête, un creux, une crête. Mesuré : 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit, contre 0,9 % en mode normal. - Contenu décoratif : les points sont des
divvides que les lecteurs d'écran ignorent. Si chaque point représente quelqu'un ou quelque chose (un groupe de coureurs, un animal), écrivez-le en légende ou dans le point, avecoffset-rotate: 0deg. - Contraste : sur le fond sombre, les trois couleurs passent le seuil de 3:1 des éléments graphiques ; la vague, à 6 %, n'est qu'un guide. Sur fond clair, foncez-la.
- Rythme : une boucle de 4 s à vitesse constante, sans clignotement.
Compatibilité navigateur
CSS seul : offset-path: path(), offset-distance animé et animation-delay négatif, aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : mêmes positions des trois points, même écart, même arrêt sous mouvement réduit. Non vérifié sur un vrai Safari.
Un navigateur sans offset-path empile les trois points, immobiles, en haut à gauche de la scène ; la vague reste dessinée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0037-root">
<div class="mp-wave-scene">
<svg viewBox="0 0 300 200" fill="none">
<path d="M0,100 C25,50 50,50 75,100 … 300,100" … />
</svg>
<div class="mp-wave-dot mp-wave-dot--1"></div>
<div class="mp-wave-dot mp-wave-dot--2"></div>
<div class="mp-wave-dot mp-wave-dot--3"></div>
</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 |
|---|---|---|
Couleurs et tailles (CSS — .mp-wave-dot--1, --2, --3) |
Violet 14 px, rose 10 px, cyan 8 px | Changez background, box-shadow, width et height. Le centre reste sur la vague quelle que soit la taille : pas de marge à recalculer. |
Ordre et écart de la file (CSS — animation-delay) |
0s, -1s, -2s (un quart de trajet entre deux points) | Le délai le plus négatif est devant. Pour mettre le gros point en tête, inversez : -2s pour --1, 0s pour --3. Des délais plus proches (-0.5s) resserrent la file. |
Vitesse (CSS — 4s de l'animation) |
4 s | Gardez les délais proportionnels à la durée (un quart de la durée pour un quart de trajet). linear garde les écarts constants ; un autre ralenti les ferait varier. |
| Forme de la vague (HTML + CSS) | 2 ondulations de 37,5 px sur 300 px | Le tracé est écrit deux fois, dans le d du chemin svg et dans l'offset-path : changez les deux. |
| Étiquette ou icône dans un point (HTML + CSS) | Points vides | Mettez un span dans le point, en position: absolute, et ajoutez offset-rotate: 0deg au point, sinon le texte tourne avec la pente. |
Fond (CSS — .fx-0037-root) |
#0a0a0f | Changez ou retirez le fond ; sur fond clair, foncez la vague (blanc à 6 % par défaut). |
FAQ
overflow: hidden) afin que le saut se fasse hors champ, ou ajoutez un fondu aux deux bouts avec des images clés d'opacité.linear, chaque point avance à la même vitesse sur le tracé, et un quart de la durée sépare deux points. Vu à l'horizontale, l'écart change un peu, puisque la vague monte et descend ; mesuré, les trois points restent sur la ligne à 0,03 px près dans les trois moteurs.
