Carte, scroll, data, css et JavaScript Carte, scroll, data, css et JavaScript

Aujourd’hui, une petite démo avec un plugin GSAP combiné avec plusieurs techniques pour faire une navigation en 2D.

Prérequis :

• Comprendre les unités vw et vh ;
• Comprendre le position absolute ;
• Comprendre les transformations CSS avec GSAP ;
• Comprendre l’overflow en CSS.

Créer le HTML, le CSS et penser au JavaScript

Mon body contient quelques div avec la class item, une class spécifique item+chiffre et des data-* où * sera le nom de ses datas.

<div class="item item1" data-link="item3" data-xy="100vw,100vh">01</div>
<div class="item item2" data-link="item1" data-xy="200vw,200vh">02</div>
<div class="item item3" data-link="item4" data-xy="200vw,50vh">03</div>
<div class="item item4" data-link="item2" data-xy="0,150vh">04</div>

Avec un peu de CSS, mes éléments sont superposés (position : absolute) et occupent toutes la largeur et la hauteur (vw et vh).

document.querySelector('.item1').dataset.link; 
// contient la chaîne de <div … data-link="truc" >…</div>, donc "truc"

Placer avec du code

TweenMax.set permet de changer les valeurs des propriétés CSS d’un élément sans animation. Avec TweenMax, on peut mettre en valeur une fonction avec deux paramètres (i,e), i compte de 0 à n et e contient l’élément.
On renvoit une reponse avec un return et ce qu’on veut, ici je récupère le data-xy, je le transforme en tableau en coupant à la virgule et je prends la première entrée pour les x, la seconde pour les y.

TweenMax.set('.item',{
  x:function(i,e){
    return e.dataset.xy.split(',')[0];
  },
  y:function(i,e){
    return e.dataset.xy.split(',')[1];
  }
});

le Scroll

J’ajoute un écouteur de clic sur le document et si l’élément cliqué (e.target) a un data-link, je lance ma fonction.
Je n’ai pas eu 100% satisfaction avec les ancres (#…), j’ai donc repris les transformations CSS appliquées via le TweenMax ; elles sont stockées dans un objet attaché à l’élément element._gsTransform.x pour le x…
Avec un quelques commentaires à lire dans le JS.

See the Pen cartographique by Benoît Wimart (@benoitwimart) on CodePen.