DNA Helix
8 points indigo/fuchsia 12 px en 4 paires, oscillation X opposée 1 s (250 ms de décalage entre niveaux) — conteneur 60 × 60 px en rotateY 2 s. Pur CSS.
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. Chargement comprend 29 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le composant est un .loader-dna de 60 × 60 px déclaré position: relative et transform-style: preserve-3d. Il contient exactement 8 span vides disposés en 4 paires : les deux premiers à top: 0, les suivants à top: 25% (15 px), 50% (30 px) et 75% (45 px). Chaque paire occupe la même hauteur. Les span impairs (:nth-child(2n+1)) reçoivent background: #6366f1 (indigo) ; les pairs, #d946ef (fuchsia). Tous sont ronds (border-radius: 50%), positionnés en absolu à left: 50%, et un transform: translateX(-50%) de base les centre — valeur écrasée par les animations dès qu'elles démarrent.
Deux animations pilotent le mouvement latéral. dnaWave1 part de translateX(-20px) scale(.8) à 0 % et 100 %, atteint translateX(20px) scale(1) à 50 % : la sphère glisse de gauche (point gauche, écrasé à 80 %) vers la droite (point plein). dnaWave2 est l'exact inverse. Ces deux keyframes s'appliquent en alternance aux paires impaire/paire : à tout instant, un point va à gauche pendant que son voisin de même niveau va à droite — les deux brins se croisent au milieu du conteneur toutes les 0,5 s. Les quatre niveaux sont déphasés de 0 s, 0,25 s, 0,5 s, 0,75 s : l'écart couvre exactement un cycle complet de 1 s réparti sur 4 hauteurs, ce qui crée une onde sinusoïdale qui descend le long de la structure.
Une troisième animation, dnaRotate, applique rotateY(360deg) en 2 s linéaire infini sur le conteneur entier. Grâce à transform-style: preserve-3d, les 8 enfants participent au contexte 3D. Aucun span n'a de translateZ propre (Z = 0 pour tous) : la profondeur vient exclusivement de la rotation du conteneur. Conséquence mesurée : à 90° et 270° de la rotation (0,5 s et 1,5 s dans le cycle de 2 s), le conteneur est vu de chant — les spans mesurent ~1 px de large (mesuré entre 0,68 px et 0,85 px sous Chromium). Cet état « fil » dure environ 80 ms par passage ; c'est le comportement attendu d'un objet plat vu de profil, pas une anomalie. L'effet est entièrement CSS — le champ js est vide, aucun script n'est nécessaire.
Accessibilité
- prefers-reduced-motion absent du code : les 3 animations (dnaRotate, dnaWave1, dnaWave2) s'exécutent sans condition, même lorsque la préférence
prefers-reduced-motion: reduceest active. Mesuré sous Playwright :animationPlayState: "running"sur le conteneur et les 8 spans après émulation. Le correctif en CSS tient en deux lignes :@media (prefers-reduced-motion: reduce) { .loader-dna, .loader-dna span { animation: none } }. L'intégrateur doit décider du repli visuel : 8 cercles statiques empilés suffisent à indiquer « quelque chose est présent ». - En tant qu'indicateur de chargement, le composant doit signaler son état aux technologies d'assistance. Le code vendu ne contient ni
role="status", niaria-busy, niaria-live, ni texte alternatif. Intégrer ainsi :<div class="loader-dna" role="status" aria-label="Chargement en cours">…</div>. Si un texte visible « Chargement… » accompagne le loader,aria-labelest superflu —role="status"seul suffit. - Les 8
spanvides sont des éléments de présentation. Sansaria-hidden="true"sur le conteneur, certains lecteurs d'écran les parcourent et annoncent 8 éléments vides. Ajouteraria-hidden="true"sur.loader-dnalorsque la zone porte déjàrole="status"et un libellé accessible. - Contraste : les deux couleurs sont des éléments graphiques non textuels (seuil WCAG 3:1 pour les composants UI). Sur le fond
#0a0a0fde la démo : indigo#6366f1→ 5,4:1 ✓, fuchsia#d946ef→ 5,1:1 ✓. Sur fond blanc (#fff) : indigo → 3,4:1 ✓, fuchsia → 3,0:1 (à la limite — préférer#c026d3sur fond clair pour atteindre 3,3:1 sans altérer la teinte). - L'effet ne répond qu'au cycle d'animation CSS : aucun événement souris ou clavier n'est capturé, aucun scroll-linked trigger. La zone n'est pas interactive et ne doit pas être focalisable (
tabindexabsent du code vendu — à ne pas ajouter).
Compatibilité navigateur
CSS pur : transform-style: preserve-3d, @keyframes, animation, border-radius: 50%, :nth-child. Aucune dépendance externe, aucun JavaScript.
Sans support des animations CSS (navigateurs très anciens), les 8 cercles s'affichent à leur position initiale — 4 paires de points superposées, statiques. Sans transform-style: preserve-3d (IE 10 et inférieurs), la rotation 3D se comporte comme une rotation 2D : l'effet reste lisible mais perd sa profondeur. Les couleurs et la forme des cercles sont toujours rendues.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-dna">
<span></span>
<span></span>
<!-- … 8 spans au total — 4 paires aux niveaux top 0 / 25% / 50% / 75% -->
</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 |
|---|---|---|
Durée de rotation (CSS — animation: 2s … dnaRotate) |
2 s | Vitesse d'un tour complet en 3D. 1s = rotation vive, sensation d'urgence ; 4s = rotation lente et posée. Valeur indépendante des ondulations — les deux cycles ne se synchronisent pas (2 s et 1 s : rapport 2:1, les brins complètent 2 croisements par tour). |
Durée des ondulations (CSS — animation: 1s … dnaWave1/dnaWave2) |
1 s | Vitesse d'un aller-retour d'un brin. Changer les 8 déclarations d'animation en même temps (spans 1-8). 0.6s = brins nerveux ; 2s = ondulation lente qui accentue la profondeur. Ne pas descendre sous 0.4s — la fonction ease-in-out a besoin de temps pour lisser les transitions. |
Décalage entre niveaux (CSS — .25s, .5s, .75s) |
250 ms d'écart (4 niveaux × 0,25 s = 1 cycle complet) | Pas de l'onde verticale. Réduire à .1s : l'onde descend plus vite, l'hélice paraît plus compacte. Augmenter à .4s sur une durée d'ondulation de 1,6 s : les 4 niveaux couvrent alors exactement un cycle (même rapport). Les deux paires d'un même niveau gardent toujours le même délai. |
Amplitude latérale (CSS — translateX(±20px)) |
±20 px | Portée de l'oscillation depuis left: 50%. La valeur maximale sans débordement : (largeur conteneur / 2) − (largeur span / 2) = 30 − 6 = 24 px. À ±10px : hélice resserrée, brins qui se frôlent ; à ±24px : brins aux extrémités du conteneur. Changer les deux keyframes (dnaWave1 et dnaWave2) ensemble. |
Couleur brin 1 (CSS — background: #6366f1) |
#6366f1 (indigo) | Couleur des spans impairs (positions 1, 3, 5, 7). Toute valeur CSS valide. La couleur de halo éventuel (box-shadow) n'existe pas dans le code vendu — à ajouter manuellement si souhaité. |
Couleur brin 2 (CSS — background: #d946ef) |
#d946ef (fuchsia) | Couleur des spans pairs (positions 2, 4, 6, 8). Utiliser une couleur très proche de celle du brin 1 pour une hélice monochrome subtile ; choisir un complémentaire pour maximiser le contraste entre brins. |
Taille du conteneur (CSS — width: 60px; height: 60px) |
60 × 60 px | Les top des spans sont en pourcentage (0 / 25% / 50% / 75%) : ils s'adaptent automatiquement à un nouveau height. Changer width et height ensemble pour conserver la forme carrée. Ajuster l'amplitude latérale (règle précédente) en proportion. |
FAQ
dnaRotate tourne le conteneur de 360° sur l'axe Y en 2 s. À 90° et 270° (soit à 0,5 s et 1,5 s dans chaque cycle), le conteneur est vu de chant — les 8 spans, qui n'ont pas de profondeur propre (translateZ: 0), apparaissent comme une ligne de ~1 px de large (mesuré : 0,68–0,85 px sous Chromium). Cet état dure environ 80 ms par passage avant que la rotation reprenne. Pour éviter cet effet « fil », ajouter translateZ(15px) aux spans impairs et translateZ(-15px) aux pairs : les brins sont alors placés en avant et en arrière du plan central, et l'hélice reste visible à tout angle.transform-style: preserve-3d) pendant que les enfants s'animent en 2D à l'intérieur — c'est la combinaison des deux mouvements qui crée l'illusion d'hélice. Morphing Shape (fx-0431) et SVG Morphing Loaders (fx-0777) n'ont aucune rotation 3D. DNA Helix est aussi le seul de ce groupe à être entièrement CSS sans aucun élément SVG.#6366f1 atteint 3,4:1 (WCAG — composant UI ≥ 3:1 ✓) mais fuchsia #d946ef tombe à 3,0:1 (limite — préférer #c026d3, 3,3:1). Le fond #0a0a0f du code vendu est dans le .demo-preview : retirez ce wrapper et appliquez votre propre fond. .loader-dna lui-même n'a pas de fond déclaré.
