Zoom sur l'effet parallaxe

Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax.

Qu'est-ce que l'effet parallaxe ?

Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Ce principe concerne au minimum deux éléments et peut être appliqué à plusieurs endroits : sur les images de fond, sur un en-tête ou un pied de page, sur des images... etc.

Des exemples

Utilisant le positionnement de la souris

digitalhands.net

bikingboss.com
 

Utilisant le niveau du scroll

nikebetterworld.com

ok-studios.de

driver-club

Principe et théorie

Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). Le but va donc être de modifier les valeurs de positionnement en fonction de ces paramètres que l'on mesure.

Illustration pour le scroll

Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. C'est cette différence de vitesse qui crée l'effet parallaxe.

Illustration pour le positionnement de la souris

Le concept est exactement le même que précédemment, cependant nous ne prenons pas le scroll comme repère mais la position de la souris.

En pratique

Nous allons parler ici uniquement de l'effet avec le scroll. Il existe bien entendu plusieurs méthodes, mais toutes ont la même base. Pour se baser sur le positionnement avec la souris, il existe de nombreux autres tutoriels, utilisez votre moteur de recherche favori.

Pour mieux comprendre les explications, examinons d'abord le résultat final (n'hésitez pas à regarder le code source HTML et CSS).

Démonstration

Mise en place

Nous créons 3 éléments <div> frères (#slide1, #slide3, #slide3) de même dimension (pour une question d'harmonie). On leur applique trois fonds avec images (centrées et sans répétition). Il ne faut pas oublier d'optimiser le poids des images, comme cela a déjà été mentionné (les arrières plans extensibles).

A l'intérieur de ces <div>, on ajoute un conteneur ayant une classe (.slide_inside) qui permet de centrer le contenu. On obtient alors ceci :

Démonstration

Le truc qui fixed tout

Pour le moment, les <div> sont l'une en-dessous de l'autre. Nous allons ajouter la propriété fixed à chaque background afin de donner un effet de découvrement des fonds imagés lors du défilement. L'ordre des <div> est toujours le même : chacun des fonds est fixé au centre (horizontalement) et en haut de sa division. Comme le fond est fixé, le mouvement des divisions lors du défilement de la page va donner cette impression de découvrement et recouvrement.

Nous avons d'ores et déjà un effet sympathique. C'est d'ailleurs le résultat qu'aura un utilisateur dont le JavaScript est désactivé.

#slide1 {
   background: url(slide1-bg.jpg) center 0 no-repeat fixed;
}

#slide2 {
   background: url(slide2-bg.jpg) center 0 no-repeat fixed;
}

#slide3 {
   background: url(slide3-bg.jpg) center 0 no-repeat fixed;
}

Démonstration

La touche de JavaScript

L'effet obtenu va être sublimé. Le but du jeu est simple : déplacer (sur l'axe vertical) les images de fond à une vitesse différente de la vitesse de déplacement du contenu lors d'un défilement. Pour ceci, nous allons intégrer la bibliothèque JavaScript jQuery et lui adjoindre le script jQuery-Parallax.

Insertion de jQuery

Nous vous conseillons de charger ce script en l'insérant à la fin de votre document HTML, avant </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Insertion et paramétrage de jQuery-Parallax

Après téléchargement, insérez-le de la même façon après le chargement de jQuery.

<script type="text/javascript" src="script/jquery.parallax-1.1.js"></script>

Le script jQuery-Parallax va agir directement sur la propriété CSS background-position en modifiant la position verticale.

Cela se révèle pratique dans notre cas avec nos images de fond, mais cela signifie qu'il faut obligatoirement créer un élément ayant un background pour réaliser cet effet. Il est impossible d'animer directement un élément img. Trouver un autre script (qui agirait directement sur son placement relatif ou absolu) serait peut être plus adapté pour ce genre de cas.

La syntaxe :

$("élément").parallax(xPosition, adjuster, inertia, outerHeight);

• xPosition : Position horizontale de l'élément (nomenclature CSS).
• adjuster : La position verticale de départ (en pixels).
• inertia : Vitesse en fonction du scroll. Exemple: 0.1 = 1/10 ème de la vitesse du scroll, 2 = deux fois la vitesse du scroll.
• outerHeight : Détermine si jQuery utilise sa propre fonction outerHeight pour déterminer quand une partie est visible dans le viewport (true ou false).

On l'applique donc sur nos 3 <div> principales (#slide1, #slide3, #slide3) :

<script type="text/javascript">	
	$(document).ready(function(){		
	    $('#slide1').parallax("center", 0, 0.1, true);
	    $('#slide2').parallax("center", 900, 0.1, true);
	    $('#slide3').parallax("center", 2900, 0.1, true);
	})
</script>

C'est terminé ! L'image de fond de chaque slide va être déplacée de quelques pixels lors du défilement. Cela suffit pour que la magie opère.

Démonstration

On remarque un bug : l'image de fond de la première div (#slide1) ne revient pas à sa position initiale lorsque l'on scroll. On obtient alors un décalage non voulu.

Explications :
Sur le site de l'auteur, en regardant le code CSS, on remarque que le background de cette première div est placé à "-75px". Si on le met à "0" (comme sur l'exemple de cet article), il y a bien cet effet de décalage.

Solution :
Prévoir directement un décalage sur le background de la première div et adapter l'image en conséquence. Pas très élégante, mais fonctionnelle !

Conclusion

On peut réellement s'amuser avec ce genre d'effet à l'image des sites mentionnés en exemples. Au-delà des inconvénients inhérents à ce type d'effets (poids des images de fond et les différents scripts par exemple), le résultat s'avère généralement très séduisant et permettra de vous démarquer grâce à cette petite touche originale.

Concernant les performances : consultez l'article HTML5 Rocks : Parallaxin'