Tutoriel pour faire un effet de parallaxe simple

Dans ce tutoriel, on va essayer d’expliquer étape par étape la technique pour gérer la parallaxe, pour faire plus simple il serait mieux pour vous de télécharger l’archive contenant les fichiers.

voir la démo Télécharger les fichiers

 

Dans ce tutoriel, vous allons voir:

  • La structure pour avoir un site en parallaxe
  • La technique pour animer l’image de fond suivant une vitesse différente lors du scroll de la page
  • La technique pour synchroniser la durée des animations.

Voici les fichiers qu’on va utiliser index.html, main.css et _main.js que vous pourrez ouvrir dans votre éditeur et que nous allons modifier au fur et à mesure.

Étape 1 – Mise en place

La structure html

La structure dans index.html est assez simple, nous aurons 4 sections avec une image de fond .bcg et un div conteneur .hsContainer qui sera horizontalement et verticalement centré.

Chaque section aura un background personnalisé et le contenu sera repositionné.
Le style du texte sera légèrement différent sur chacune des sections dans le but de le rendre plus lisible.

JS

Dans _main.js nous allons précharger les images de fond grâce au plugin ImagesLoaded et redimensionner chacune des sections pour prendre 100% la hauteur du navigateur.

Si vous affichez le fichier index.html dans un navigateur maintenant, vous verrez quatre sections qui défilent normalement avec l’image de fond fixe qui a été défini dans notre feuille de style.

Maintenant, nous allons initialiser le plugin Skrollr.js et commencer à donner un effet parallaxe.

Étape 2 – Skrollr.js

Ajoutez les lignes suivantes à main.js pour permettre d’initialiser Skrollr.js et de se recharger chaque fois que les sections sont redimensionnées à 100% du hauteur de la fenêtre.

Section 1

Maintenant, nous devons ajouter quelques data attributes à nos sections pour voir Skrollr en action et ainsi voir l’image de fond et le contenu se déplacer à une vitesse différente.

Copiez et collez les lignes suivantes dans index.html:

Le plugin va demander au navigateur de changer la position de l’image de fond de 50% 0 à 50% -100px , ce qui signifie que l’image sera déplacé de 100px à partir du début du défilement jusqu’à ce que le bas de #slide-1 dépasse le haut de la fenêtre du navigateur.

Si vous êtes débutant sur Skrollr.js et les data attributes voir ici le Skrollr Cheatsheet

Le texte défile avec la page jusqu’à ce que #slide-1 h2 arrive au centre du navigateur, puis l’animation est lancé pour cacher le texte, cela nous l’avons défini par data-top=”bottom: 1200px; opacity: 0″.

Le data-anchor-target est un attribut très puissant, car il permet de définir exactement le début et la fin de l’animation.

Section 2

Copiez et collez les lignes de code suivantes pour activer les animations sur la deuxième section

Ici, nous allons animer l’image de fond à la même vitesse pour garder la cohérence des choses.

La différence entre #slide-1 et #slide-2 est que sur la deuxième le texte ne s’affichera pas que lorsqu’un point précis sera atteint par le scroller.
C’est pourquoi nous avons définis à la fois data-top-bottom et data-bottom-top.
Data-center dans notre cas ne sert à rien vu que sa valeur est exactement à mi-chemin entre le haut et le bas. Vous pourrez expérimenter différentes valeur pour voir comment cela impacte l’ensemble de l’animation.

Pour cette section, nous allons modifier le css pour le contenu .hsContent et h2 pour pouvoir fixer le titre au bas de la fenêtre.

Maintenant le titre est fixé à 70% du haut de la page et du coup il sera par défaut visible jusqu’à ce que #slide-2 arrive à 100px du bas du navigateur.

Section 3

Vous devriez savoir maintenant ce qu’il faut faire … copier et coller les lignes de code suivantes dans votre index.html .

Maintenant, vous devrez connaitre la technique pour manipuler facilement les animations, que vous pourrez modifier manuellement à votre guise sans pour autant fatiguer les yeux des internautes.

Section 4

Enfin, la dernière section :

Pour la dernière section nous allons aussi modifier légèrement notre css. Nous allons fixer que le texte en haut du navigateur et nous allons supprimer le bg-color et le padding.

Le titre de la section sera fixée à 250px du haut de la page et sera invisible jusqu’à ce que #slide-4 sera à 25% du haut de la fenêtre du navigateur.

Étape 3 – Forcer la Hauteur de la page

Si vous êtes arrivé à ce point là c’est que vos animations de défilement parallaxe fonctionnent parfaitement

Il y a un seule hic, lorsque vous scrollez jusqu’à la dernière section, vous verrez une bande noir un peu gênant.

Par défaut Skrollr gère la hauteur du document afin de s’assurer que toutes les animations ne débordent pas, mais si nous voulons que la page se termine à la dernière diapositive, nous devons desactiver l’option forceHeight par le code suivant :

Répondre