TONER KEBAB WIKI

wiki DSAA design graphique Marseille

Outils pour utilisateurs

Outils du site


wiki:tutoriels:tutoriels

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Both sides previous revision Révision précédente
wiki:tutoriels:tutoriels [2019/10/10 14:18]
aria Parallax
wiki:tutoriels:tutoriels [2019/10/10 14:19] (Version actuelle)
aria
Ligne 1: Ligne 1:
-====== ​''​**Le parallax**'' ​======+''​**Le parallax**''​
  
  
Ligne 11: Ligne 11:
  
  
-===== **Mise en place** ​=====+**Mise en place**
  
  
Ligne 34: Ligne 34:
  
  
-=====**La touche de JavaScript**=====+**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 ​ 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 ​
Ligne 41: Ligne 41:
  
  
-=====**Insertion de jQuery**=====+**Insertion de jQuery**
  
 Charger ce script en l’insérant à la fin du document HTML, avant </​body>​. Charger ce script en l’insérant à la fin du document HTML, avant </​body>​.
Ligne 55: Ligne 55:
   ​   ​
  
-=====**Le script jQuery-Parallax** ​=====+**Le script jQuery-Parallax**
  
 //​https://​github.com/​IanLunn/​jQueryParallax//​ //​https://​github.com/​IanLunn/​jQueryParallax//​
Ligne 64: Ligne 64:
  
  
-====__La syntaxe :__====+__La syntaxe :__
  
 $(«élément»).parallax(xPosition,​ adjuster, inertia, outer‐ Height); $(«élément»).parallax(xPosition,​ adjuster, inertia, outer‐ Height);
Ligne 85: Ligne 85:
  
  
-====__Démonstration :__====+__Démonstration :__
     ​     ​
 // http://​www.alsacreations.com/​xmedia/​tuto/​exemples/​paral // http://​www.alsacreations.com/​xmedia/​tuto/​exemples/​paral
Ligne 93: Ligne 93:
 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. 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 :**====+**Solution :**
 Prévoir directement un décalage sur le background de la première div et adapter l’image en conséquence. 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/​ http://​www.html5rocks.com/​en/​tutorials/​speed/​parallax/​
  
wiki/tutoriels/tutoriels.txt · Dernière modification: 2019/10/10 14:19 par aria