Nous avons vu le plugin ScrollTrigger de GSAP, mais ce n’est pas le seul. Certains sont conditionnels à une adhésion membre, mais il en est un gratuit qui est fort pratique quand on veut créer du texte animé. Pour mon propre projet, je m’en sers pour afficher les titres des films.
Pour ce faire, j’ai ajouté une balise <p> vide dans le html, mais associée à une classe CSS:
La classe est elle-même définie ainsi:
Enfin, dans le JS, j’ai ajouté une méthode gsap.to:
Le paramètre texte, c’est le texte qui apparaît dans ma balise <p>; autoAlpha assure en général une transition plus souple; ensuite un délai de 3 secondes; une durée de 4 secondes; et le ease donne l’impression que la personne tape avec hésitation au début, puis devient plus confiante (truc de Carl Schoof). Sur les ease, voir ici. Pour que ça marche, il faut cependant avoir référé au CDN du plugin dans le head du html:
J’ai aussi ajouté une police Google du type approprié.
Laisser un commentaire