Tutoriel : créer un effet de parallaxe avec jQuery

Vous avez certainement déjà visité un site en une seule page ou les articles se succèdent les uns à la suite des autres sur un même document. Ces pages utilisent souvent un effet parallaxe pour ajouter un plus au webdesign du site.

Mais qu’est-ce que l’effet parallaxe ?
L’effet de parallaxe consiste à faire défiler différents plans à des vitesses différentes. Par exemple, un objet placé en arrière plan défilera plus lentement qu’un objet au premier plan. Ce phénomène se retrouve dans la réalité. Si vous masquez un objet avec votre main et que vous déplacer votre œil, l’objet masqué apparaît de chaque côté, parce qu’il ne se déplace pas à la même vitesse que votre main.
Dans cet article, vous trouverez un code simple pour faire défiler des images à des vitesses différentes.
galaxieVoici le code complet pour réaliser un effet de parallaxe pour un défilement vertical.
<!DOCTYPE html>
<html>
<head>
    <title>Parallax</title>
    <meta charset="utf-8">
<style>
#img1 {
   background: url('http://outils-web.fr/wp-content/uploads/2014/02/mouette.png');
   width: 640px;
   height: 427px;
   opacity: 0.1;
   position: fixed;
   top: 0px;
   left: 250px;
   margin-top: 50px;
   z-index: 1;
}
#img2 {
   background: url('http://outils-web.fr/wp-content/uploads/2014/02/mouette.png');
   width: 640px;
   height: 427px;
   opacity: 0.5;
   position: fixed;
   top: 0px;
   left: 250px;
   margin-top: 150px;
   z-index: 2;
}
section {
width: 100%;
height: 2000px;
background-color: #dddddd;
}
body{
margin: 0px;
}

</style>
</head>

<body>
<section>

<div id="img1"></div>


<div id="img2"></div>

</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">		
$(window).scroll(function(e){
    parallax();
});
function parallax(){

    var scrolled = $(window).scrollTop(); 

    $('#img1').css('top', -(scrolled * 0.1) + 'px');
	$('#img2').css('top', -(scrolled * 0.3) + 'px');

}
</script>
</body>
</html>

Vous êtes impatient de visualiser le résultat : Effet parallaxe

Regardons de plus près le code de cette page HTML.

  • La première partie utilise une feuille de style css pour positionner  deux div dont l’id est img1 et img2. Ces blocs de contenus ont comme image de fond une mouette. Ce sont ces images qui donneront l’effet parallaxe. Ces div sont positionnées en « fixed ». Le décalage par rapport au dessus de l’image se fait avec margin-top et non top pour éviter des problèmes de déplacements relatifs.
  • La seconde partie HTML correspond juste aux deux div sur lesquel l’effet parallaxe sera effectué?
  • La troisième partie concerne le javascript et jquery. On commence par charger la bibliothèque jQuery. Ensuite, on récupère l’événement scroll de l’objet window. Lorsqu’on fait défiler la fenêtre, la fonction parallax est appelée qui modifie l’attribut « top » des blocs contenant les mouettes, ce qui donne un défilement différent pour chacun d’un.
  • Ce sont les valeurs de top qu’il faut modifier pour changer l’effet parallaxe. Pour le positionnement initial par rapport au haut de page, il faut modifier le margin-top des css.

Ce petit tutoriel est maintenant terminé. J’espère qu’il vous aura aider dans vos créations? N’hésitez pas à le partager.

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
sauvegarde-wordpress
Comment sauvegarder et réinstaller un blog wordpress intégralement ?

Si vous possédez un blog Wordpress, vous n'êtes pas à l'abri d'un piratage ou peut-être avez-vous envie de changer d'hébergeur....

geometry dash
Geometry Dash, le jeu android qu’il vous faut !

Si vous n'avez pas encore ce jeu, il faut vraiment télécharger l'application. C'est le jeu du moment. Lorsque vous l'aurez...

chat_outils_web_ascii
Le code ascii, les caractères spéciaux et le ascii art

Le code ASCII vous connaissez ? Pourtant c'est très utile et même parfois très joli. Au sommaire : 1. Qu'est-ce...

Fermer