Outils pour utilisateurs

Outils du site


playground:playground

Le parallax

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 du parallax va donc être de modifier les valeurs de positionnement en fonction de ces paramètres que l’on mesure. 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.

ex : http://www.alsacreations.com/xmedia/tuto/exemples/parallaxe/etape3/// 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). Penser à optimiser le poids des images. A l’intérieur de ces <div>, on ajoute un conteneur ayant une classe (.slide_inside) qui permet de centrer le contenu. Les <div> sont l’une en-dessous de l’autre. 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. #slide1 { background: url(slide1-bg.jpg) center 0 no-repeat ; } #slide2 { background: url(slide2-bg.jpg) center 0 no-repeat ; } #slide3 { background: url(slide3-bg.jpg) center 0 no-repeat ; } La touche de JavaScript 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 https://github.com/IanLunn/jQuery-Parallax//

Insertion de jQuery

Charger ce script en l’insérant à la fin du 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

https://github.com/IanLunn/jQueryParallax// va agir directement sur la propriété CSS background-position en modifiant la position verticale. 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. La syntaxe : $(«élément»).parallax(xPosition, adjuster, inertia, outer‐ Height); 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 : http://www.alsacreations.com/xmedia/tuto/exemples/paral laxe/etape3/ 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. Solution : Prévoir directement un décalage sur le background de la première div et adapter l’image en conséquence. http://www.html5rocks.com/en/tutorials/speed/parallax/

playground/playground.txt · Dernière modification: 2019/10/10 14:11 (modification externe)