TONER KEBAB WIKI

wiki DSAA design graphique Marseille

Outils pour utilisateurs

Outils du site


playground:playground

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
playground:playground [2017/12/11 11:01]
mathilde_sancere
playground:playground [2019/10/10 14:11] (Version actuelle)
aria Parallax
Ligne 1: Ligne 1:
-======Photographier les étoiles====== +**Le parallax**
- Porteur(s) du projet : Mathilde Sancere +
-  ​Date : 11/​12/​2017 +
-  ​Licence : libre ! +
-  ​Contexte :  +
-  * Fichiers : liens éventuels +
-  * Lien : lien vers un site éventuellement+
  
-===== Description ===== +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). 
-Texte concis +Le but du parallax va donc être de modifier les valeurs de positionnement en fonction de ces paramètres que l’on mesure. 
-===== Matériaux ===== +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. 
-Liste de matériel et composants nécessaires + 
-  * appareil photo + 
-  * trépied +//ex :  http://​www.alsacreations.com/​xmedia/​tuto/​exemples/​parallaxe/​etape3///​ 
-  * optionnel ​télécommande + 
-===== Tutoriel ===== + 
-Photos ou guide pas à pas + 
-[[https://www.youtube.com/watch?v=ZPim2od0xPA&​list=LLSmAvXH1KDBH524YfttwfWQ&​index=4|Explication plus poussé ​de la post production]] +**Mise en place** 
-===== Photos ===== + 
-{{:playground:b03974ec6bde0355b9190ec42c24cf61.gif |cool}} +Nous créons 3 éléments <div> frères (#slide1, #slide3, #slide3) de même dimension (pour une question d’harmonie). 
-Autres photosgalerie, ...+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»00.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 par aria