Text Explosion
Au clic, chaque lettre s'envole avec une transition élastique en ressort — un second clic les rassemble dans leur position initiale.
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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur .kt-text.kt-explosion regroupe des <span class="char"> — un par caractère. Chaque span hérite de display: inline-block via le CSS, ce qui autorise des transformations 2D indépendantes sans sortir du flux du texte. La fonction utilitaire splitChars(el) génère ces spans dynamiquement depuis le data-text ou le textContent du conteneur.
Au premier clic, le gestionnaire parcourt les .char et assigne à chacun un transform inline aléatoire : translate(x, y) rotate(angle) avec des valeurs indépendantes par lettre (typiquement ±150–300 px en x/y, ±360° en rotation). La classe .exploded est ajoutée simultanément sur le conteneur — elle sert de marqueur d'état et modifie la courbe de transition pour le retour.
La dispersion utilise cubic-bezier(.34, 1.56, .64, 1) sur .4s : une courbe à dépassement (overshoot) qui simule un ressort — chaque lettre dépasse brièvement sa destination avant de s'y stabiliser. La réassemblage (second clic) bascule sur cubic-bezier(.25, .46, .45, .94) en .8s : sans dépassement, plus lente, elle donne l'impression que les lettres convergent par inertie vers leur position d'origine.
Le CSS du fichier couvre également .kt-wave, .kt-elastic, .kt-scatter, .kt-liquid et .kt-whirlpool — chacun active un comportement différent via sa classe. L'utilitaire splitChars() défini dans le JS est partagé entre tous ces modes.
Accessibilité
- prefers-reduced-motion : absent du CSS fourni — aucune alternative statique n'est prévue nativement. Recommandation avant déploiement :
@media (prefers-reduced-motion: reduce) { .kt-explosion .char { transition: none } }. - Le texte reste du HTML natif (spans) lisible par les lecteurs d'écran — aucun canvas ne masque l'information. Ajouter
aria-labelsur le conteneur si le mot seul ne décrit pas suffisamment le contexte. - Aucun écouteur clavier câblé dans le JS fourni : l'interaction est souris uniquement. Pour l'accessibilité clavier, ajouter
tabindex="0"sur le conteneur et un écouteurkeydown(Entrée/Espace). - Contraste texte : les
.charen#fffsur fond#0a0a0fatteignent un ratio ≈ 18:1 — bien au-delà de WCAG AA (4,5:1 pour le texte normal). user-select: nonesur.kt-textbloque la sélection du texte — si le contenu porte une information importante, prévoir unaria-labelou un équivalent textuel hors écran.
Compatibilité navigateur
Utilise CSS Transforms niveau 1 et transitions CSS — supportés depuis IE10+. Zéro dépendance externe.
Sans JS, les <code><span class="char"></code> s'affichent en ligne et le texte reste lisible — aucune erreur fatale. La page reste fonctionnelle sans aucun effet de transformation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="kt-text kt-explosion" data-text="VOTRE TEXTE" style="cursor: pointer;">
<!-- Généré par splitChars() ou pré-splitter en markup -->
<span class="char" data-char="V">V</span>
<span class="char" data-char="O">O</span>
<span class="char" data-char="T">T</span>
<span class="char" data-char="R">R</span>
<span class="char" data-char="E">E</span>
<!-- Un <span class="char"> par caractère du texte -->
</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 |
|---|---|---|
| data-text | BOOM | Mot à afficher et découper en .char — modifiez l'attribut dans le markup pour changer le mot de l'effet sans toucher au JS. |
| font-size (CSS .kt-text) | 2.2rem | Taille des caractères. Montez à 5–8 rem pour un usage hero plein écran ; descendez à 1.5–2 rem pour un titre de section compact. |
| color (CSS .kt-text) | #fff | Couleur des caractères. Combinez avec background-clip: text; -webkit-text-fill-color: transparent sur .kt-text pour des lettres en dégradé. |
| letter-spacing (CSS .kt-text) | .02em | Espacement inter-lettres. Valeur positive pour un rendu aéré (hero) ; valeur négative (-.02em) pour un rendu condensé (game). |
| transition scatter (CSS .kt-explosion .char) | .4s cubic-bezier(.34,1.56,.64,1) | Durée et courbe de la dispersion. Raccourcissez à .2s pour une explosion plus sèche ; remplacez par ease-out pour supprimer le dépassement. |
| transition retour (CSS .kt-explosion.exploded .char) | .8s cubic-bezier(.25,.46,.45,.94) | Durée et courbe de la réassemblage. Allongez à 1.2–1.5s pour une convergence magnétique ultra-lente. |
| splitChars(el) | — | Génère dynamiquement les <span class="char"> depuis data-text ou textContent. Utile pour du texte chargé côté serveur ou dans un CMS. |
| scatter radius (JS, ±px) | ±150–300 px selon le contexte | Amplitude de dispersion à définir dans votre gestionnaire de clic. Valeur typique : 40–50 % de la largeur du conteneur. |
FAQ
splitChars(el) pour découper le texte en spans. La logique de clic (assigner un transform: translate(x,y) rotate(angle) aléatoire à chaque .char, basculer la classe .exploded) est à câbler dans votre propre script. C'est intentionnel : l'amplitude de dispersion dépend de la taille de votre conteneur.splitChars() sur chaque conteneur puis attachez un écouteur de clic indépendant par élément. Les classes .kt-explosion et .kt-explosion.exploded sont scopées au sélecteur CSS — chaque conteneur gère son propre état sans interférence..char sont des spans display: inline-block ordinaires — ils héritent de color, de background-clip: text, de -webkit-text-fill-color: transparent et de tout style appliqué à .kt-text. Les transitions de transform ne réinitialisent aucune propriété de couleur.
