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.

Shattering Text Animation  : voici une animation très stylée pour donner un effet cinématographique à votre texte

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

 

Blended text layers  : optez pour un style rétro avec des ombres portées colorées

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

 

Simple CSS Hover Effect using Sass Loops  : utilisez les boucles SASS pour insérer des délais dans votre animation

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

 

Exploding Text  : surprenez votre visiteur avec cette animation explosive et aléatoire

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

 

Text-mask background moving on MouseMove – v2  : peut-être préférez-vous une animation plus douce avec un background animé au passage de votre souris ?

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

 

Focus Text Hover Effect | HTML+ CSS + jQuery  : voici une animation originale où seule votre souris vous permettra de lire nettement le texte

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

 

Spring Text Hover Effect  : faites apparaître un bouton au survol de votre titre

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

 

How do I get a custom colored underline that will span multiple lines ?  : rien de mieux qu’un surlignage coloré pour mettre en valeur certains mots de votre texte

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

 

CSS Perspective Text Hover  : ajoutez de la perspective à votre texte avec cette animation 100 % HTML et CSS

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

 

Peeled Text Transforms  : et si vos lettres se transformaient en de petites fenêtres ?

See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.0

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.

I Love You (mo.js animation)  : dites à vos internautes que vous les aimez avec cette surprenante animation

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

 

Masking Path Animation  : signez votre page avec une signature personnalisée et animée

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

 

Impossibly Tipsy  : jouez avec les formes et insérez de la profondeur avec cette animation

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

 

Silent Movie Text Effect  : ajoutez une ambiance mystérieuse à votre histoire avec cet effet

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

 

Text Line Animation  : voici une petite animation réalisée avec TweenMax.js

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

 

SVG text animation  : cet effet typographique coloré donnera de la perspective et un style animé à votre texte

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

 

CSS Text Revealing Animation  : révélez votre texte avec cette simple animation CSS

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

 

SVG video mask on text : avez-vous déjà eu l’idée d’ajouter une vidéo derrière votre titre ?

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

 

THANKYOU to my first 1000 followers ! (timeline SVG animation)  : remerciez vos internautes de la meilleure façon qu’il soit

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

 

Text animation  : utilisez cette animation bien connue mais toujours facile à lire sur votre page d’accueil

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

Effets « Typing »

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

Text typing thingamy  : rajoutez de la profondeur à votre animation avec une superbe ombre portée.

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

 

Kinetic Type with Greensock  : voici une animation originale où la saisie du texte par l’internaute influence votre titre

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

 

Typing Text with Javascript  : il est également possible de personnaliser le curseur.

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

 

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

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

 

Text Scramble Effect  : cet effet a déjà été vu plusieurs fois et vous permet de donner un style « décodage » à votre texte

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

 

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

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

 

Simple Typing Carousel  : animation bien connue, celle-ci est très utilisée sur les sites des agences ou des portfolios

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

 

Typing Text  : donnez un look rétro mais tendance à votre texte avec cette animation

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

 

Futuristic Resolving  : ajoutez une touche futuriste à votre site avec cet effet mélangeant lettres et caractères spéciaux

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

 

Typing Effect  : l’effet « typing » peut tout à fait prendre en charge deux tailles de police différentes

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

 

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