Les sites internet sont de plus en plus interactifs et la nécessité d’animer le design d’un site est devenu primordial. C’est pourquoi je voudrais vous partager une technique visant à animer un fichier SVG. Avant ça, petit rappel sur le SVG

Qu’est ce qu’un fichier SVG ?

Un fichier SVG est une image vectorielle. La définition Wikipédia dit :

Le Scalable Vector Graphics (en français « graphique vectoriel adaptable1 »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium.
Source : Wikipédia

L’avantage du SVG est principalement que peut importe la résolution de votre écran, ou la dimension de base de l’image, nous pourrons redimensionner cette image à volonté sans la déformer.

L’intérêt de l’animation SVG

L’intérêt principal de l’animation SVG est de dynamiser un graphisme pour illustrer certains éléments. Un bon exemple est le site le-mugs.com dans l’onglet « la carte ». Scrollez et vous verrez un chemin se dessiner entre les différents éléments.

Je vais donc vous montrer une façon de jouer avec ce genre d’animation SVG au scroll.

L’animation SVG

Commençons par le commencement, il vous faut un fichier SVG représentant un chemin qui servira de base pour votre animation. Vous pouvez le dessiner dans un logiciel comme Illustrator©.

Je vous donne celui que j’ai utilisé pour réaliser mon animation :


<svg version="1.1" id="Story_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1599px" height="2174px" viewBox="0 438 1599 1926">
    <path fill="none" class="path" stroke="#FFFFFF" stroke-width="16" stroke-linecap="round"  d="M820.491,445.561
    c-412.479-18-358.67,385.481-348.827,439.479s36.843,182.991,90.84,194.99s248.987-169.582,376.481-118.494
    c281.984,149.992,5.057,705.846-37.119,759.259c-40.994,51.917-119.162,84.913-166.87,71.699S544,1711,658,1630
    c113.254-80.47,188.836,622.94,263.832,661.938"/>
</svg>

Voici donc votre fichier SVG de base. Maintenant nous allons chercher à l’animer. Mais avant celà, il faut mettre votre structure html en place.


<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            //Ici nous placerons notre code pour animer
        </script>
        <style>
            /* Ici les styles nécessaires */
        </style>
    </head>
    <body>
        <!-- Notre html -->
        <div class="frame">
            <!-- le conteneur du SVG -->
        </div>
    </body>
</html>

Petit point explicatif, j’ai choisis d’utiliser jQuery par facilité, mais il n’est pas obligatoire de l’utiliser. Bien que le code que je vais vous fournir utilise ce Framework, il n’est nullement obligatoire de l’utiliser.

On passe aux styles histoire que cela ressemble à quelque chose :


body {
  font-family: arial, helvetica, sans-serif;
  background: black;
  color: white;
}
.frame {
  height: 2180px;
  position: relative;
}
svg {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;  
  bottom: 0;
  width: 100%;
}
.path {
  stroke-dashoffset: 5000px;
  stroke-dasharray: 5000;
}

Petit point  explicatif : la frame qui contient le SVG est en position relative car pour les besoins de la présentation, notre balise SVG est en absolue. Le but de cette manœuvre est de pouvoir mettre du contenu avant (ou après) notre animation. De plus les éléments qui seront représentés comme des éléments d’histoire par exemple seront aussi positionnés en absolu.

Les propriétés stroke-dashoffset et stroke-dasharray servent à définir la dimension de notre tracé, et la position de départ.

Il ne reste plus qu’à animer avec le scroll notre SVG. Pour celà nous utiliserons le Javascript à l’aide de jQuery.


$(document).ready(function() {
  //Définition des variables
  var path = $('.path');
  //variable for the 'stroke-dashoffset' unit
  var $dashOffset = $(".path").css("stroke-dashoffset");
  //Récupérer la position du conteneur de l'animation
  //(avec marge de 250px pour débuter l'animation avant qu'elle soit tout en haut de l'écran - Valeur arbitraire de votre choix)
  var animOffset = $('.frame').offset().top - 250;
  //Sur l'événement Scroll on lance la fonction
  $(window).scroll(function() {
    //Si le scroll est superieur ou égal à la position de notre animation on peut l'animer
    if($(window).scrollTop() >= animOffset){
      //On calcul la position du scroll moins la position de l'animation pour débuter l'animation seulement quand on elle est visible
      var positionOutOffset = $(window).scrollTop() - animOffset;
      //Calcul du pourcentage de scroll pour l'animation par rapport à la taille du contener
      var percentage = ((positionOutOffset / ($('.frame').height() - $(window).height())) * 100);
      //Conversion du dashoffset vers un entier
      var $newUnit = parseInt($dashOffset, 10);
      //Récupération de la valeur à soustraire de "stroke-dashoffset"
      var $offsetUnit = percentage * ($newUnit /150);
      //On modifie la valeur du "stroke-dashoffset" pour donner cette impression de dessin
      $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
    }
  });
});

Et voilà, vous avez en main les clés pour animer un SVG de type chemin.

Pour aller plus loin, vous pouvez ajouter un petit snippet qui permet d’initialiser l’animation au cas où il y aurait des ancres dans votre page correspondant à votre animation. Ceci permettrait d’éviter que l’animation soit masquée lors de l’arrivée sur votre page. Pour cela, ajoutez avant l’appel de la fonction scroll, et après la définition des variables le code suivant :

    
var positionOutOffset = $(window).scrollTop() - animOffset;
var percentage = ((positionOutOffset / ($('.frame').height() - $(window).height())) * 100);
var $newUnit = parseInt($dashOffset, 10);
var $offsetUnit = percentage * ($newUnit /150);
if($(window).scrollTop() >= animOffset ){
  $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
}

Que fait ce code ? Et bien il fait exactement la même chose que celui du scroll mais sur l’événement document.ready. Il calcule donc la position dans la page et si on est au niveau de l’animation il va afficher l’étape où nous sommes.

Voir la démo en ligneTélécharger la source

Animation SVG au scroll
Taggé sur :        

Laisser un commentaire