Nous avons vu dans le dernier article comment ajouter une couche en faisant défiler la page Web. En fait, on pourrait aussi déclencher plusieurs fonctions en même temps, comme ajouter une couche, se déplacer et zoomer dans la carte, changer la carte de fond, tout cela en une seule fois. Ainsi, le code suivant:
donnera cela (régler le zoom à 0.25x):
See the Pen Sherbrooke 1881 This Basemap by Tristan Landry (@cybergastronom) on CodePen.
On pourrait aussi déclencher une animation GSAP. On se souvient que notre animation a été associée à une variable du même nom. Pour pas que l’animation se déclenche dès l’ouverture de la page, j’ai simplement ajouté dans les paramètres paused: true.
Puis j’ai ajouté une ligne dans ma méthode ScrollTriggerCreate:
«Animation» est le nom de ma GSAP timeline. Ça me donne ceci:
See the Pen Sherbrooke 1881 This Basemap by Tristan Landry (@cybergastronom) on CodePen.
À noter que les canevas de storymaps offerts par ESRI, Knight Lab et Mapbox ne vous permettent pas de faire ceci. D’où l’avantage de programmer vos propres storymaps, sans compter le fait que vous maîtrisez aussi entièrement leur esthétique.
Laisser un commentaire