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.

Besoin d'un graphiste ?
Trouvez gratuitement un graphiste qualifié et disponible !

Déposez votre annonce

Vous êtes graphiste ? Créer un compte gratuitement

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

 

Commandez un logo personnalisé
à l'un de nos 30 000 graphistes professionnels
Pour toutes les entreprises et tous les budgets

Commander mon logo

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.

3 Commentaires

Laissez un commentaire