{"partition": "head_middle", "source_domain": "www.alsacreations.com", "digest": "sha1:M4YQK6WZA4GYIHF2W46BKQCU7U57IVZL", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2014-15/000_00006.parquet"}
Aller à la recherche TutorielsAstucesOutilsLivresQuiz Niveau : Zoom sur l'effet parallaxe
Tutoriel par Simon-K (Art Director & Creative Designer, Paris)
Créé le 02 Mars 2012, mis à jour le 21 Décembre 2012 (165458 lectures)
Tags : design, jquery, background, scroll, parallaxe, parallax
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.
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,