Melting Text

Le code

Un aperçu du code source :

<div class="melt-text" id="meltText">
    <span style="animation-delay: 0s; color: hsl(260, 70%, 60%)">M</span>
    <span style="animation-delay: 0.1s; color: hsl(275, 70%, 60%)">E</span>
    <span style="animation-delay: 0.2s; color: hsl(290, 70%, 60%)">L</span>
    <span style="animation-delay: 0.30000000000000004s; color: hsl(305, 70%, 60%)">T</span>
    <span style="animation-delay: 0.4s; color: hsl(320, 70%, 60%)">I</span>
    <span style="animation-delay: 0.5s; color: hsl(335, 70%, 60%)">N</span>
    <span style="animation-delay: 0.6000000000000001s; color: hsl(350, 70%, 60%)">G</span>
  </div>
</div>

Cas d'usage concrets

Quelques contextes où Melting Text fait mouche :

• Une intro de site créatif
• Un titre d'accroche marquant
• Une transition visuelle audacieuse

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur animation @keyframes, filtres CSS (filter) et transformations CSS (transform).

À personnaliser

Tu peux régler :

• la vitesse d'animation (actuellement 2s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajoute le petit script JavaScript avant </body> — c'est prêt.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Distorsion

FAQ