Des polices très flexibles
Dans le monde dynamique du design web et de la typographie numérique, la police variable se présente comme une innovation révolutionnaire. Une seule police de caractères capable de se transformer et de s’adapter à vos besoins spécifiques, sans avoir besoin de multiples fichiers de polices distincts. C’est exactement ce que la police variable nous offre.
Combiner les polices variables avec des animations
Le code suivant HTML, CSS et JavaScript crée une page web avec une animation typographiques utilisant GSAP (GreenSock Animation Platform) et une police variable, dans ce cas, la police « Recursive ».
See the Pen Recursive variable by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté
Ce code illustre comment combiner les polices variables avec des animations CSS / Javascript pour créer des effets typographiques….
CSS
- Variables CSS : Déclare des variables CSS globales pour la variation de poids (
--wght), l’inclinaison (--slnt), et d’autres styles de la police Recursive. - Styles des Divs :
#v1: Utilise la variable CSS pour le poids de la police (--wght).#v2,#v3,#v4: Applique des poids de police spécifiques (100, 400 et 700 respectivement) à chaque div en utilisantfont-variation-settings.
JavaScript
- Animation GSAP :
- Crée une timeline GSAP pour animer les propriétés CSS.
- Cible
#v1et anime la variable CSS--wghtpour passer de 300 à 1000 en 2 secondes. - Utilise
yoyo:truepour faire revenir l’animation à son état initial de manière fluide. - Répète indéfiniment (
repeat:-1) avec un délai de 2 secondes (repeatDelay:2) entre chaque cycle.