Contributeur: [[wiki:karma:aria-giulj:accueil|Aria Giulj]]
Projet : Html5, CSS, Javascript
======Parallax html5 Css======
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
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
, on ajoute un conteneur ayant une classe (.slide_inside) qui permet de centrer le contenu.
Les
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
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