Pour permettre à vos visiteurs de se souvenir de votre site, il est important de soigner son design. Pour cela, pourquoi ne pas inclure des animations de texte originales pour marquer leur esprit ?
Faites appel à un webdesigner en déposant un projet sur Graphiste.com pour qu’un professionnel réalise sur-mesure une animation en HTML CSS pour votre site.
Si vous préférez mettre les mains dans le code vous-même, voici 30 animations de textes qui vont, à coup sûr, surprendre vos visiteurs !
Animations de texte CSS et animations de texte JavaScript
Le CSS, Cascading Style Sheets ou Feuilles de Style, est un langage de feuille de style qui permet d’attribuer des styles à différents éléments du HTML. Il sert à coder la forme de la page : couleurs, marges, bordures, images, etc.
JavaScript, écrit souvent JS, est un langage de programmation permettant d’implémenter des mécanismes complexes, tels que des animations 2D/3D, des cartes interactives, des menus vidéos, etc. Le langage JavaScript est très avancé dans la conception web et contribue à l’interactivité d’un site.
Exemples d’animations de textes CSS et JavaScript on hover
Commençons par des animations générées par le survol de votre souris.
Les effets de survol participent à l’expérience de l’internaute sur le site web. Ce mouvement change l’apparence du texte une fois la souris dessus, entraînant la modification de la couleur, de la taille, de la rotation, etc. Les effets typographiques on hover sont tout particulièrement adaptés pour les animations de titres.
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. Dans cet exemple animation JavaScript, le texte ressemble à du verre qui se défragmente en plein de petits morceaux lors du passage de la souris. L’effet d’éclatement ralentit et reprend sa vitesse normale après le survol de la souris.
See the Pen
Blended text layers by Genevieve (@genevievecm)
on CodePen.
Optez pour un style rétro avec des ombres portées colorées. Cette animation est réalisée à partir de langage JavaScript et du transpileur Babel. Une ombre colorée apparaît lors du passage de la souris sur la lettre, ce qui donne un effet rétro combiné avec la police arrondie et les couleurs pop.
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. Cette technique permet de créer des animations séquentielles fluides et de contrôler le flux des scripts. Dans cette boucle SASS présentée, le codage met en valeur chaque lettre les unes après les autres.
See the Pen
Exploding Text by Joseph Martucci (@jjmartucci)
on CodePen.
Surprenez votre visiteur avec cette animation explosive et aléatoire. Parfait dans le heading d’une page web, cet exemple d’animation JavaScript marque les esprits. En survolant le texte, les lettres vont dans tous les sens, en changeant de taille et d’endroit, le tout de manière aléatoire, donnant l’impression d’une explosion en perspective.
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 ? Cet exemple animation JavaScript est un effet simple et efficace donnant une illusion de profondeur en mettant un fond animé d’étoiles dans le texte. Parfait pour un site scientifique ou geek, mais vous avez aussi la possibilité de mettre une autre image animée en fond.
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. Focus est un effet JavaScript qui montre seulement une lettre à la fois au niveau du curseur, donnant l’impression de faire une mise au point caméra. Le reste du texte est flouté et estompé lorsque le curseur n’est pas dessus.
See the Pen
Spring Text Hover Effect by Nathan Taylor (@nathantaylor)
on CodePen.
Faites apparaître un bouton au survol de votre titre. Cette animation de titre CSS apporte un élément de design original. Lorsqu’on survole le texte, ce dernier se surélève et permet de révéler un bouton. Ce type d’animation augmente l’interactivité du site et sera très adaptée pour des entreprises créatives.
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. Cet exemple d’animation JavaScript avec Babel surligne les mots au passage du clic. Vous pouvez souligner un seul mot ou une phrase entière, comme bon vous semble.
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. Lors du passage de la souris, on a l’impression que le texte glisse sur un escalier, apportant une forte impression de perspective. Le glissement suit le mouvement de la souris.
See the Pen
Peeled Text Transforms by Zoë Bijl (@Moiety)
on CodePen.
Et si vos lettres se transformaient en de petites fenêtres ? Cet effet donne l’impression que le texte est découpé d’une page en papier et que chaque lettre se recolle à la page lorsqu’on passe dessus. L’animation est créée sur Stylus, qui est un préprocesseur CSS.
Texte animé CSS ou JavaScript
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. Créé avec Javascript Babel, ce « I Love You » animé peut être placé dans un texte qui remercie votre communauté par exemple. Se rapprochant d’un GIF, cette animation va ornementer la page internet.
See the Pen
Masking Path Animation by Envato Tuts+ (@tutsplus)
on CodePen.
Signez votre page avec une signature personnalisée et animée. Confectionné en CSS, cet effet reproduit une écriture, idéal pour mettre la signature du créateur de l’entreprise ou du rédacteur d’un texte par exemple, en bas du corps de texte. Ou à utiliser, pourquoi pas, en slogan dans le heading.
See the Pen
Impossibly Tipsy by James Mellers (@jamesmellers)
on CodePen.
Jouez avec les formes et insérez de la profondeur avec cette animation. Conçu en CSS, un rectangle tourne et passe devant et derrière le texte. Le rectangle se stabilise au passage du clic. Cet effet procure un côté minimaliste et moderne au site web.
See the Pen
Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos)
on CodePen.
Ajoutez une ambiance mystérieuse à votre histoire avec cet effet. Cet exemple animation JavaScript donne un style rétro de vieille pellicule de film. Vous pouvez l’utiliser pour mettre en valeur des informations importantes.
See the Pen
Text Line Animation by John Healey (@jhealey5)
on CodePen.
Voici une petite animation réalisée avec TweenMax.js. Ce design JavaScript utilise des empreintes de doigt. Parfait, par exemple, si vous avez une entreprise de sécurité ou de gardiennage. Vous pouvez aussi remplacer les empreintes par autre chose.
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. Cette animation, très tendance, en JavaScript, est idéale pour un site ciblant un public jeune. Personnalisable, vous pouvez changer la couleur ou la police. Il peut être utilisé dans le heading pour faire un slogan par exemple.
See the Pen
CSS TEXT REVEALING ANIMATION by Nooray Yemon (@yemon)
on CodePen.
Révélez votre texte avec cette simple animation CSS. Minimaliste et au goût du jour, un mot apparaît en fondu, puis le reste de la phrase est révélé. Cette animation est parfaite pour mettre en valeur des écrits.
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 ? Cette animation de titre CSS est totalement modifiable, une vidéo différente peut être incrustée. On peut imaginer cet effet sur un site touristique par exemple, pour présenter une destination.
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. Montrez votre gratitude à votre communauté qui vous suit sur les réseaux sociaux par exemple, grâce à ce texte de remerciement JavaScript. Modifiable, vous pouvez mettre le texte en français par exemple.
See the Pen
Text animation by Yoann (@yoannhel)
on CodePen.
Utilisez cette animation bien connue, mais toujours facile à lire sur votre page d’accueil. Cette animation de texte CSS est très stylée avec des mots qui disparaissent pour en laisser apparaître d’autres, par effet de rotation. Il peut être mis en introduction interactive sur la page d’accueil du site par exemple.
Effets d’animation CSS ou JS “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. Dans cet effet typing JavaScript, un texte est tapé puis supprimé pour écrire une nouvelle phrase, à plusieurs reprises. Très adapté pour un slogan d’entreprise qui se divise en plusieurs parties.
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. Faite en JavaScript, cette typographie cinétique permet à l’internaute d’écrire son texte qui apparaît au-dessus en animation. Interactif, original et un peu geek, c’est un effet parfait pour une start-up ou un freelancer par exemple.
See the Pen
Typing Text with Javascript by Max (@MyXoToD)
on CodePen.
Un effet typing basique, mais qui fait beaucoup d’effet. Réalisé en JS CoffeeScript, il est parfait pour un portfolio ou pour le site d’une startup. Il peut donner une petite intro à des services ou à une présentation de la personne. Modifiable, vous pouvez même 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. Fait en JavaScript, cet effet donne un côté machine à écrire au texte. Il sera bien adapté pour écrire des citations. N’hésitez pas à changer la police pour l’adapter au reste de votre site.
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. Inspiré du film Matrix, cet effet « typing » Javascript Babel montre des lettres qui changent et se réajustent pour finalement faire apparaître une phrase, nous donnant l’impression que l’écran nous parle. Look geek garanti !
See the Pen
LOVE Text Effect by Matthew Wagerfield (@wagerfield)
on CodePen.
Les cinéphiles reconnaîtront peut-être cette animation inspirée du film de science-fiction LOVE. Cet effet typing Javascript CoffeeScript donne un aspect crypté et codé. A mettre sur le site d’un développeur web, d’un graphiste ou d’une start-up en informatique.
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. Minimaliste et efficace, cette animation typing JavaScript donne un ton cool et moderne au site. Une phrase s’affiche, dont un mot est effacé, en remplaçant un autre. Idéal pour mettre en avant les qualités d’un produit ou d’une personne.
See the Pen
Typing Text by Alex Tkachev (@alexpopovich)
on CodePen.
Donnez un look rétro, mais tendance à votre texte avec cette animation. Ce typing effect JavaScript a un fonctionnement simple en soi, mais l’écriture rétro et la couleur pop donnent un rendu fun.
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. Cet effet typing JS Babel donne l’impression d’avoir un texte crypté futuriste. Révélez le côté geek de votre site, en présentant le contenu du site ou une nouveauté par exemple.
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. Simple et efficace, cet effet machine à écrire donne la possibilité de mettre un gros titre avec un corps de texte de petite taille.
Lire aussi : Prototypo, créez votre propre typographie sur-mesure en quelques clics
Notre astuce pour une animation de texte sur-mesure
Pour créer des animations de texte CSS ou des animations JavaScript, vous pouvez utiliser la plateforme Codepen, un grand catalogue d’extraits de code CSS, JavaScript, appelés Pens. Tous les codes peuvent être repris et modifiés afin de correspondre au mieux au site internet.
Cependant, les langages CSS et JavaScript ne sont pas à la portée de tous, étant donné leur complexité. Ils sont surtout utilisés par les développeurs web. Nous vous recommandons donc d’avoir recours à un professionnel du développement ou du webdesign.
Pour mettre en place des animations de texte CSS ou JavaScript sur votre site internet, faites appel à un graphiste professionnel en déposant une annonce gratuitement sur Graphiste.com, et choisissez le freelance qui réalisera votre projet personnalisé.
