Dessin au scroll

Une variation avec la technique d’animation utilisant la propriété CSS stroke-dashoffset pour animer les traits. Ici, les traits apparaissent lorsque l’utilisateur fait défiler la page.

En gros, par JavaScript, on va chercher la longueur du trait avec la fonction getTotalLength() puis on mesure l’emplacement de la fenêtre active sur la page en comparant les éléments clientHeight et scrollHeight pour trouver le haut et le bas du viewport et ainsi faire apparaitre ou disparaitre les traits. Je vérifie aussi le type d’appareil ; si c’est un téléphone, la dimension des dessins est réduite de 50%. Chaque SVG est autonome et comprend donc sont propre script personnalisé.