Inspiration

30 animations de texte pour surprendre vos visiteurs

Effets et animations pour titre et texte
Publié par Charlotte Chollat

Je suis certaine que vous rêvez d’impressionner vos visiteurs lorsque ceux-ci visitent votre site web. Certains d’entre vous ont d’ailleurs sûrement opté pour un design original, ce qui est loin d’être une mauvaise idée si celui-ci est réussi.

Mais j’aimerai aujourd’hui vous proposer une autre façon d’obtenir un petit “wow !” de votre internaute.

Peut-être aurez vous la même réaction en découvrant ces animations typographiques ?

Animations on hover

Commençons par des animations générées par le survol de votre souris.

See the Pen
Shattering Text Animation
by Arsen Zbidniakov (@ARS)
on CodePen.


Voici une animation très stylée pour donner un effet cinématographique à votre texte

See the Pen
Blended text layers
by Genevieve (@genevievecm)
on CodePen.


Optez pour un style rétro avec des ombres portées colorées

 

See the Pen
Simple CSS Hover Effect using Sass Loops
by Charlie Marcotte (@FUGU22)
on CodePen.


Utilisez les boucles SASS pour insérer des délais dans votre animation

 

See the Pen
Exploding Text
by Joseph Martucci (@jjmartucci)
on CodePen.


Surprenez votre visiteur avec cette animation explosive et aléatoire

 

See the Pen
Text-mask background moving on MouseMove – v2
by Robert Borghesi (@dghez)
on CodePen.


Peut-être préférez-vous une animation plus douce avec un background animé au passage de votre souris ?

 

See the Pen
Focus Text Hover Effect | HTML+ CSS + jQuery
by Cameron Fitzwilliam (@CameronFitzwilliam)
on CodePen.


Voici une animation originale où seule votre souris vous permettra de lire nettement le texte

 

See the Pen
Spring Text Hover Effect
by Nathan Taylor (@nathantaylor)
on CodePen.


Faites apparaître un bouton au survol de votre titre

 

See the Pen
How do I get a custom colored underline that will span multiple lines?
by Will King (@Wking)
on CodePen.


Rien de mieux qu’un surlignage coloré pour mettre en valeur certains mots de votre texte

 

See the Pen
CSS Perspective Text Hover
by James Bosworth (@bosworthco)
on CodePen.


Ajoutez de la perspective à votre texte avec cette animation 100% HTML et CSS

 

See the Pen
Peeled Text Transforms
by Zoë Bijl (@Moiety)
on CodePen.


Et si vos lettres se transformaient en de petites fenêtres ?

Texte animé

L’animation automatique de votre texte au chargement de la page web peut également être un bon moyen d’ajouter du dynamisme à votre page.

See the Pen
I Love You (mo.js animation)
by Anton Mudrenok (@mudrenok)
on CodePen.


Dites à vos internautes que vous les aimez avec cette surprenante animation

 

See the Pen
Masking Path Animation
by Envato Tuts+ (@tutsplus)
on CodePen.


Signez votre page avec une signature personnalisée et animée

 

See the Pen
Impossibly Tipsy
by James Mellers (@jamesmellers)
on CodePen.


Jouez avec les formes et insérez de la profondeur avec cette animation

 

See the Pen
Silent Movie Text Effect
by Dimitra Vasilopoulou (@mimikos)
on CodePen.


Ajoutez une ambiance mystérieuse à votre histoire avec cet effet

 

See the Pen
Text Line Animation
by John Healey (@jhealey5)
on CodePen.


Voici une petite animation réalisée avec TweenMax.js

 

See the Pen
SVG text animation
by Cassie Evans (@cassie-codes)
on CodePen.


Cet effet typographique coloré donnera de la perspective et un style animé à votre texte

 

See the Pen
CSS TEXT REVEALING ANIMATION
by Nooray Yemon (@yemon)
on CodePen.


Révélez votre texte avec cette simple animation CSS

 

See the Pen
SVG video mask on text
by Simon Evans (@SimonEvans)
on CodePen.


Avez-vous déjà eu l’idée d’ajouter une vidéo derrière votre titre ?

 

See the Pen
THANKYOU to my first 1000 followers! (timeline SVG animation)
by Rachel Smith (@rachsmith)
on CodePen.


Remerciez vos internautes de la meilleure façon qu’il soit

 

See the Pen
Text animation
by Yoann (@yoannhel)
on CodePen.


Utilisez cette animation bien connue mais toujours facile à lire sur votre page d’accueil

Effets “Typing”

L’écriture automatique de votre titre ou de votre texte est un bon moyen de capter l’attention de vos internautes.

See the Pen
Text typing thingamy
by Jack Armley (@jackarmley)
on CodePen.


Rajoutez de la profondeur à votre animation avec une superbe ombre portée.

 

See the Pen
Kinetic Type with Greensock
by Nerdmanship (@nerdmanship)
on CodePen.


Voici une animation originale où la saisie du texte par l’internaute influence votre titre

 

See the Pen
Typing Text with Javascript
by Max (@MyXoToD)
on CodePen.


Il est également possible de personnaliser le curseur.

 

See the Pen
typewriter
by gavra (@gavra)
on CodePen.


Révélez le caractère de votre site en personnalisant la police d’écriture

 

See the Pen
Text Scramble Effect
by Justin Windle (@soulwire)
on CodePen.


Cet effet a déjà été vu plusieurs fois et vous permet de donner un style “décodage” à votre texte

 

See the Pen
LOVE Text Effect
by Matthew Wagerfield (@wagerfield)
on CodePen.


Les cinéphiles reconnaîtrons peut-être cette animation inspirée du film de science-ficton LOVE

 

See the Pen
Simple Typing Carousel
by Gregory Schier (@gschier)
on CodePen.


Animation bien connue, celle-ci est très utilisée sur les sites des agences ou des portfolios

 

See the Pen
Typing Text
by Alex Tkachev (@alexpopovich)
on CodePen.


Donnez un look rétro mais tendance à votre texte avec cette animation

 

See the Pen
Futuristic Resolving/Typing Text Effect feat. GLaDOS
by Kevin (@qkevinto)
on CodePen.


Ajoutez une touche futuriste à votre site avec cet effet mélangeant lettres et caractères spéciaux

 

See the Pen
Typing Effect
by Van Huynh (@worksbyvan)
on CodePen.


L’effet “typing” peut tout à fait prendre en charge deux tailles de police différentes

 

Nous avons fini le tour de ces 30 animations de texte. N’oubliez pas que celles-ci doivent être utilisées avec modération.

5 Commentaires

Laissez un commentaire