10 extraits de code CSS et JavaScript de texte animé étonnants

Vous pouvez créer des effets de texte assez éblouissants avec un CSS de base et quelques lignes de JavaScript. Ces effets vont des animations d'affichage de texte aux rotations 3D ou à tout ce que vous pouvez imaginer.

Et dans cet article, j'ai répertorié 10 des exemples les plus intéressants du Web montrant ce que vous pouvez faire avec juste un peu de texte stylisé et de code CSS.

Vous aimerez peut-être aussi ces outils d'animation CSS.

1. Animation du titre

Cet effet de titre animé par Robin Treur suit le style de nombreux films ou jeux vidéo. Les lettres prennent un effet 3D saillant en utilisant des ombres de texte CSS3 avec une légère inclinaison diagonale.

Le style d'animation en fondu me rappelle les films classiques des années 1930 avec le même texte incliné. Tout est contrôlé via CSS mais le bouton "redémarrer" est construit en utilisant JavaScript. De cette façon, vous pouvez jouer l'animation plusieurs fois pour obtenir un meilleur aperçu.

2. Briser

Créer un texte brisé brisé est une tâche simple avec des outils comme After Effects, mais créer une animation de brisure de texte avec du code est beaucoup plus difficile, ce qui rend ce stylo d'Arsen Zbidniakov assez impressionnant.

Le texte est en fait construit à l'aide de formes SVG, ce qui facilite un peu le processus d'animation. Cela signifie également que vous ne pouvez pas sélectionner, copier ou interagir avec le texte comme d'habitude.

Mais vous pouvez ajouter un effet similaire à votre site si vous l'utilisez pour un logo ou un autre élément de page non interactif.

3. Lettres tordues

Le développeur Mamun Khandaker a rassemblé cette collection d'animations de lettres tordues. Chaque style d'animation a un nom différent et vous pouvez tous les parcourir dans ce seul stylo.

Je pouvais voir ces effets de texte utilisés sur les pages de destination ou les pages d'accueil d'un outil/d'une application Web. Ceux-ci attirent immédiatement l'attention et laissent une impression durable sur le visiteur. De plus, ils sont tous fabriqués avec du CSS 100% pur et super faciles à modifier.

4. Lettres alphabétiques

Cet effet de pixel animé unique est définitivement étrange, mais étrangement fascinant. Il repose principalement sur JavaScript et a été créé par le développeur Georgi Nikoloff pour jouer avec l'élément de canevas HTML5.

Il utilise Noto Serif comme base de police et convertit les lettres en éléments malléables à l'intérieur de l'élément canvas. JavaScript décompose les lettres en points plus petits et ceux-ci forment la base de l'animation.

Je ne peux pas dire que cela aurait une grande utilité pratique, mais cela témoigne du chemin parcouru par l'animation Web.

5. Carrousel de frappe

Cet effet est notoirement populaire sur les petits portefeuilles et les sites Web des agences. L'animation de saisie de texte apparaît souvent dans l'en-tête d'un site et imite l'apparence de quelqu'un qui tape dans un traitement de texte.

Tout est contenu dans un seul élément avec un bon mélange d'animation CSS et JavaScript. Parfois, vous verrez des sites Web l'utiliser pour répertorier les descriptions de leur travail, ou leur histoire, ou les clients avec lesquels ils ont travaillé.

C'est certainement un effet amusant lorsqu'il est utilisé avec modération . Puisqu'un seul mot est visible à la fois, cela limite la lisibilité de la page, mais lorsqu'il est utilisé avec parcimonie, c'est un effet très cool que n'importe qui peut copier.

6. Tyger Tyger

Empruntant des mots au poème de William Blake "The Tyger", cette animation très unique de Joseph Martucci attire vraiment votre attention.

L'accent n'est pas tant mis ici sur le contenu, mais plutôt sur les styles typographiques et les animations. Chaque "segment" du texte a son propre style avec des contours de texte et des effets lumineux. C'est un excellent exemple de la façon dont vous pouvez styliser une page d'accueil pour animer du texte de manière séquentielle à l'aide de setTimeout() .

7. Snap SVG

La bibliothèque open source Snap.svg permet à quiconque de créer des images SVG haute résolution avec juste un peu de code. C'est beaucoup plus facile que d'apprendre un programme comme Illustrator et cela vous permet d'animer tout comme cet exemple amusant créé par Alexis Blondin.

Toutes les lettres sont créées dynamiquement via JavaScript, y compris les caractères aléatoires utilisés dans l'animation. Le support SVG moderne est énorme et ces types d'images peuvent radicalement changer la façon dont nous construisons des sites Web dans les années à venir. Cette animation Snap.svg n'est qu'un exemple et c'est vraiment cool.

8. Animation de support

Voici une autre technique d'animation de texte assez courante que je vois tout le temps. Il utilise des crochets avec du texte en rotation presque comme un rolodex sur la page.

Cette animation imite l'effet de carrousel de frappe que j'ai mentionné plus tôt, sauf que cela peut être fait avec juste CSS. Il s'appuie sur une animation en boucle personnalisée qui se déplace d'une image clé CSS à une autre, chaque image affichant un mot ou une phrase différente dans le texte en rotation.

Je trouve cet effet beaucoup plus subtil et plus facile à lire sur une page d'accueil. Si vous recherchez des effets de texte sympas pour votre page d'accueil, ce serait un excellent choix.

9. Kimmie Schmidt incassable

Ce doux effet de logo a été emprunté à la série Netflix "Unbreakable Kimmie Schmidt". Tout est créé avec CSS, y compris les styles de texte et les animations personnalisées.

Le corps de la page a une classe qui lance l'animation, et cette classe est ajoutée à la page à l'aide de JavaScript. À partir de là, tout est du pur CSS. Il utilise principalement un tas de transformations pour créer un effet de rebond étonnamment réaliste.

C'est encore un autre exemple de tout ce que CSS3 peut faire si vous savez comment l'utiliser.

10. Remplir le texte SVG

Enfin, nous arrivons à cette animation de remplissage SVG très unique utilisant un mélange d'ombres de boîte et de la propriété de trait CSS.

Ce texte est entièrement construit avec des SVG mais il est également sélectionnable afin que vous puissiez copier/coller des lettres comme du texte normal. Il est entièrement compatible avec tous les navigateurs et l'animation est suffisamment subtile pour pouvoir s'intégrer à n'importe quel site Web.

Toutes ces animations de texte apportent quelque chose de nouveau à la table. Vous ne les trouverez peut-être pas tous pratiques ou utilisables dans votre propre travail, mais ils prouvent que presque tout est possible avec la bonne approche.