Même si j’ai personnellement une préférence pour ScrollTrigger, sachez qu’il est également possible de réaliser tout ce que nous avons fait jusqu’ici dans ce projet avec un plugin JQuery: Waypoints. C’est ce que j’ai utilisé pour mon projet Du Beurre ou des canons. Dans quel cas, il faudra ajouter le CDN de JQuery et celui de Waypoints dans le <head>. Après quoi, le script ressemble à ceci:
$('.ch1').waypoint(function(direction) { //.ch1 est une classe css if (direction === 'down') { map.flyTo([-300,425], 3); animate: "true"; duration: 4; } }, { offset: '40%' }); //pourcentage de la hauteur de la fenêtre. il existe d'autres options:http://imakewebthings.com/waypoints/api/offset-option/
Et si vous voulez que l’animation se fasse dans les deux sens, au lieu d’onEnterBack dans ScrollTrigger, vous pourriez écrire:
if (direction === 'up') map.flyTo([-200,325], 3);//les coordonnées précédentes animate: "true"; duration: 2; } }, { offset: '40%' });
Vous remarquerez que nous n’avons pas beson ici de la arrow function (=>).
Waypoints fonctionne ici aussi bien que ScrollTrigger, mais je trouve la documentation pour ce dernier plus facile à trouver et, combiné à GSAP, les possibilités sont plus intéressantes ou du moins plus facilement réalisables.
Laisser un commentaire