Parallax effect et animations CSS

Dans ce tutorial, nous allon étudier comment utiliser la librairie parallax.js pour créer des effets de profondeurs, et rajouter des animations à certaines couches.

Voici le résultat final :

Tout d’abord il convient de créer un container pour votre animation. Un cube de 600×600 avec une bordure et un background.
Attention à bien mettre overflow: hidden, sinon vos éléments risquent de déborder du cadre lors des animations. Hidden permet tout simplement de ne pas afficher ce qui déborde du container.

Le CSS:

.container {
display:block;
position: relative;
width:600px;
height:600px;
margin: 0 auto;
padding: 0;
top:10%;
border: 1px solid grey;
text-align:center;
overflow:hidden;
background-image:url("img/background.png");
}

Le HTML:

<div id="container" class="container"></div>

Ensuite prenons la fameuse vague de Kanagawa de Hokusai :
Hokusai wave Kanagawa

Avec photoshop, ou tout autre logiciel de traitement d’image, il faut délicatement découper les morceaux que vous souhaitez animer et/ou placer sur des couches différentes. Pas besoin de modifier la taille.
Inversez la sélection, puis effacez tout ce que vous ne voulez pas avec la gomme. Sauvegardez en .png afin de garder la transparence. Voici mes éléments :couche bateau couche vague proche couche mont fuji couche vague principale couche vague laterale

Utilisation de la librairie parallax.js:

Vous pouvez trouver cette librairie à l’adresse suivante : lien
Plaçez simplement le répertoire « deploy » à la racine de la page que vous êtes en train de créer.

Tout d’abord, il faut intégrer le script à votre page en plaçant le code suivant à la fin :

<!-- Scripts -->
<script src="./deploy/parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>

Ici on a simplement déclaré le chemin pour accéder à la librairie, et on a créé une scéne parallax.

Ensuite, dans le corps du html, à l’intérieur du container, on créé notre scene et sous forme d’un tableau, on insére nos couches en spécifiant leur profondeurs grace au paramétre data-depth :

<div id="container" class="container">
<ul id="scene" class="scene">
   <li class="layer" data-depth="0.06">
     <img class="rope" src="img/rope.png" alt="rope" width="666px" /></li>
   <li class="layer moon" data-depth="0.06">
     <img class="swing-1" src="img/moon_v2.png" alt="moon" /></li>
   <li class="layer fuji" data-depth="0.05">
     <img src="img/wave_layers_fuji.png" alt="fuji" /></li>
   <li class="layer right" data-depth="0.10">
     <img src="img/wave_layers_rightwave.png" alt="rightwave" /></li>
   <li class="layer high" data-depth="0.20">
     <img src="img/wave_layers_high.png" alt="high" /></li>
   <li class="layer bottom" data-depth="0.30">
     <img src="img/wave_layers_bottom.png" alt="bottom" /></li>
   <li class="layer boat" data-depth="0.40">
     <img src="img/wave_layers_boat.png" alt="boat" /></li>
</ul>
</div>

La suite de ce tutorial trés bientot.
Si l’exemple ne s’affiche pas vous pouvez le retrouver à l’adresse suivante : lien