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)
CitationVous 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
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