Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci outil Annotation : Touche N




Les tutoriaux: Index » Jquery » ScriptsJquery » Animer votre Background

Introduction

  • Tutoriel posté par Sky
  • 3159 lectures
  • Mis en ligne le 22-09-2010
  • Dernière mise à jour le 23-09-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir ici comment animer votre background sur plusieurs niveaux pour un effet de profondeur unique :) Le plus étonnant c'est que vous y arriverez en très peu de ligne de code.



Démo 1 : Cliquez sur ce lien
Démo 2 : Cliquez sur ce lien
Démo 3 : Cliquez sur ce lien
Autre possiblité : Cliquez sur ce lien

Méthodologie

Concept


Ce que nous voulons faire ici c'est superposer plusieurs images et les déplacer à une vitesse spécifique selon la position de la souris, déplacement horizontal et vertical. La majeure partie du code se passe dans le CSS, vous verrez ci-dessous que le code jQuery est enfantin et très court :)

Conception de notre CSS


Comme expliqué ci-dessus, nous voulons superposer des images, pour ce faire nous utiliserons les élements CSS suivant : position, z-index pour gérer l'affichage. Nous allons placer dans notre exemple un bloc principale et deux blocs contenant les images. Voyons le code de notre bloc principal

CODE CSS


	 #conteneur { 
	 position:relative;
	 top:0; // On place notre bloc à 0 pixel du haut de la page
	 left:0; // On place notre bloc à 0 pixel de la gauche de la page
	 z-index:1500; // On lui donne un z-index élevé pour qu'il soit le plus haut dans les blocs
	 width:100%; // Nous lui définissons une taille max de longueur
	 height:317px; // On lui applique une hauteur, à modifier selon la taille de vos images
	 overflow:hidden; // On cache tout ce qui dépasse
	 }



Passons à nos blocs images, ces deux bloc appaitrons en dessus de notre bloc principale, comme cela tout ce qui pourrait dépassé sera caché par notre overflow:hidden; du bloc principal (#conteneur)

CODE CSS


	 #bloc1 {
         /* Nous définisson le background de notre bloc
         ce sera notre image 1 alignée en haut à gauche 
         avec une répétition sur l'axe X */
         background-image: url(1.png);
	 background-position:top left;
	 background-repeat: repeat-x;
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:900; // On lui donne une position en dessous du bloc #conteneur
	 width:5000px; // On lui donne une taille très grande pour contenter toutes les résolutions
	 height:317px; // Taille de notre bloc et donc de notre image 1.png
	 }
	 #bloc2 {
         /* IDEM POUR LE BLOC 2 CHANGER SEULEMENT L'IMAGE ET LE Z-INDEX (plus petit) */
         background-image: url(2.png);
	 background-position:top left;
	 background-repeat: repeat-x;
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:800;
	 width:5000px;
	 height:317px;
	 }



Les images utilisées sont

IMAGE 1 (PNG transparent qui apparaitra en premier plan)


IMAGE 2 (PNG qui apparaitra en deuxième plan)


Citation

Vous l'aurez compris vous pouvez mettre autant d'images que vous voulez dans des blocs ayant un z-index qui s'incrémente.


Il peux être intéressant dans notre exemple de supprimer les marges du body pour que notre banière animée prenne bien toute la place.

CODE CSS


	 body {
	 margin:0;
	 }



Nous en avons fini avec le CSS, passons à l'affichage des blocs dans notre page HTML.

CODE HTML


L'ajout des blocs est enfantine

CODE HTML


	 
 
 



Voila :) Passons au code jQuery (Tout aussi simple)

jQuery


Pour agir sur l'ensemble de votre page utiliser $(document).mousemove, pour agir uniquement sur un bloc mettez $("conteneur").mousemove
CODE JAVASCRIPT


$(document).mousemove(function(e){ // Lorsque la souris bouge 
/* Nous attribuons une position gauche et haut */
$("#bloc1").css({"left" : ""+e.clientX/5-2500+"px", "top" : ""+e.clientY/10+"px"});   
$("#bloc2").css({"left" : ""+e.clientX/10-2500+"px", "top" : ""+e.clientY/15+"px"});  
/* e.clientX récupère la position de la souris sur son axe X */ 
/* e.clientY récupère la position de la souris sur son axe Y */ 
/* Pour le bloc1 par exemple je donne une position gauche de la valeur de la souris X 
à laquelle je soustrait 2500 pixels (c'est la moitié de mon bloc, pour que l'image soit
centrée c'est important. la division de chaque valeur influ donc sur la position 
et donc sur la vitesse ;) c'est une bonne technique pour jouer avec la profondeur 
Plus vous êtes loin plus le calque le plus loin avant doucement :) */
});



Pour le bloc1 par exemple je donne une position gauche de la valeur de la souris X à laquelle je soustrait 2500 pixels (c'est la moitié de mon bloc, pour que l'image soit centrée c'est important. la division de chaque valeur influe donc sur la position et donc sur la vitesse ;) c'est une bonne technique pour jouer avec la profondeur Plus vous êtes loin plus le calque le plus loin avance doucement :)

Je vous ai préparé deux exemples, j'espère qu'ils vous plairont:

Démo 1 : Cliquez sur ce lien
Démo 2 : Cliquez sur ce lien
Démo 3 : Cliquez sur ce lien
Autre possiblité : Cliquez sur ce lien

ET C'EST TOUT :) Tester et faites "ohhhhh c'est beauuuuu" :)
Merci d'avoir lu ces quelques lignes
Notes

  Evaluez le tutorial (9 Votes)

7
1
1

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Animer votre Background

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com