Catégories
Plugin et site web

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

Vous pouvez créer des effets de texte assez éblouissants avec 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 présentant ce que vous pouvez faire avec juste un peu de texte stylisé et de code CSS.

Vous pourriez également aimer ces outils d'animation CSS.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

1. Animation de 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é par 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 look.

2. Briser

La création de texte brisé brisé est une tâche simple avec des outils comme After Effects, mais la création d'une animation de texte brisé 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 les parcourir tous dans ce seul stylo.

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

4. Alphabet pixel

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 comme un moyen de jouer avec l'élément de toile 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 petits points et ceux-ci forment la base de l'animation.

Je ne peux pas dire que cela aurait beaucoup d’utilité pratique, mais cela témoigne du chemin parcouru par l’animation Web.

5. Carrousel de dactylographie

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

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

C'est vraiment un effet amusant lorsqu'il est utilisé avec moderation. 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 les mots du poème de William Blake "The Tyger", cette animation très unique de Joseph Martucci attire vraiment votre attention.

Ici, l'accent n'est pas tant 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 séquentiellement en utilisant 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 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 changer radicalement 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 entre parenthèses

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 carrousel de frappe que j'ai mentionné précédemment, sauf que cela peut être fait avec seulement CSS. Il repose sur une animation de bouclage personnalisée qui se déplace d'une image clé CSS à une autre, chaque image affichant un mot ou une phrase différent dans le texte rotatif.

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. Incassable Kimmie Schmidt

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 en utilisant JavaScript. De là, tout est purement CSS. Il utilise principalement un tas de transformations pour créer l'effet de rebond étonnamment réaliste.

C’est un autre exemple de ce que CSS3 peut faire si vous savez l’utiliser.

10. Remplissage de texte SVG

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

Ce texte est entièrement construit avec des SVG, mais il est également sélectionnable pour 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 s'adapter à 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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *