Sherbrooke 1881 V (ScrollTrigger+Leaflet)

Nous avons vu comment créer une animation GSAP, puis comment déclencher l’animation avec ScrollTrigger. Mais on peut utiliser également ScrollTrigger pour lancer une fonction Leaflet, comme changer la position de la carte et le zoom. Donc, pour ce faire, il faut ajouter à notre précédent projet un <div> pour notre carte (j’ai retiré le <div> .titre).

    <div id="map"></div>

Dans le CSS, j’ajoute à mon <div> .intro un z-index, car je veux qu’il flotte au-dessus de la carte:

z-index: 999;

Plus le chiffre est élevé, plus haute est sa position. Toujours dans le CSS, je définis mon <div> map comme nous le faisions dans le projet Présence autochtone.

#map {
            position: fixed;
            top:0; bottom:0;
            height: 100%;
            width: 100%;
        }

Dans le JS, j’ajoute ce code (voir les commentaires):

gsap.registerPlugin(ScrollTrigger)
/*c'est une bonne pratique de prévenir le navigateur qu'on utilise ici une ressource externe. La suite est semblable à ce qu'on a déjà fait auparavant pour le renseignement militaire russe*/

var map = L.map('map', {
    center: [54.066331,-70.040892],
    zoom: 5,
    zoomAnimation: true,
  maxBounds: [
  [69,-101],
  [28,-35]
  ],
  maxZoom: 18,
  minZoom: 4,
  zoomControl: false
  });

	var basemap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',
		{
      attribution: '&copy; <Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
    });

basemap.addTo(map);
*/les lignes suivantes permettent de faire en sorte que l'usager ne puisse interagir avec la carte seulement qu'avec la molette de la souris, selon les fonctions définies dans ScrollTrigger/*
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

ScrollTrigger.create({
    trigger: ".intro",  /*c'est l'élément déclencheur*/
    start: "top center", /*on définit où l'on veut que l'animation soit déclenchée, soit ici au milieu de la page*/
    onEnter: () => map.setView([46.856103,-71.3572587], 14),/*c'est ici qu'intervient notre fonction Leaflet*/
    markers: "true" /*permet de visualiser dans Codepen le début et la fin de l'animation; ne pas inclure dans votre projet final*/
    })  
 

Pour que ça fonctionne, il faut bien sûr avoir ajouté dans Codepen les CDN comme expliqué ici. Le résultat est le début d’une storymap entièrement programmée. Pour bien voir le pen imbriqué, réduisez le zoom (0.25).

See the Pen Sherbrooke 1881 C by Tristan Landry (@cybergastronom) on CodePen.

Essayez-vous à ajouter des <div> avec du texte, de différentes largeurs et positionné tantôt à gauche, tantôt à droite en le précisant dans le CSS (ex.: float: right;). N’oubliez pas d’ajouter des espaces entre vos contenus.