Comment créer une bannière animée à la souris ?

Comment créer une bannière animée à la souris ?

26 mars 2019 0 Par Miss Dev

Il y a peu de temps, je vous ai parlé de l’effet parallaxe. En faisant pas mal de test, j’ai décidé de vous en parler de façon plus approfondi. Notamment en créant un effet de mouvement grâce aux positionnements de la souris.

Qu'est-ce que l'effet parallaxe ?

L’effet parallaxe permet de créer des animations donnant ainsi un effet de profondeur faisant penser à la 3D. Pour plus d’informations, consulter l’article : L’effet parallaxe – des erreurs à éviter à travers 6 sites web.

animation-rocket
Voici un exemple d'utilisation de ce que nous allons apprendre ici. On voit que la fusée et les étoiles bougent en fonction des mouvements de la souris.

Les besoins

Les images

Pour réaliser cette animation, vous aurez à sélectionner 3 images. Une pour le background, une autre pour réaliser les mouvements haut, bas, droite, gauche et une dernière qui n’utilisera que les mouvements de droite à gauche.

Les extensions et fichiers à récupérer

Nous allons utiliser JQuery 1.6.4 et jquery.jparallax.min.js pour les besoins de l’animation. Pour l’utiliser, copier simplement le code dans un fichier et enregistrez-le. Par exemple, pour Jquery, créé un fichier nommé jquery-1.6.4.min.js et copié le code de la page Internet. N’ayez crainte, je vous montrerais comment intégrer ces pages à votre code.

Les dossiers à créer

Histoire de ranger un peu les fichiers et de commencer sur de bonne base, il vous faudra créer 3 dossiers nommés respectivement :

  • images, où, comme son nom l’indique, vous mettrez vos images
  • CSS, qui contiendra un fichier style.css ajoutant la mise en page
  • JS où vous rangerez les deux extensions précédemment citées.

Un fichier HTML sera également nécessaire et servira à faire le lien entre tout le contenu. On le nommera index.html et sera en dehors de tous les dossiers.

liste des besoins-effet parallaxe
Organisation des fichiers

Début de la création - le code

HTML

Comme toujours, il faut créer la page HTML avant tous. J’y mets ici le strict minimum pour mieux voir ce qui nous intéresse.

On y créer deux div ayant la classe parallax-layer et entouré de trois div servant à la mise en page. Dans ces deux div, on va insérer les fameuses images, sauf le background, qui sera inséré en CSS.

index.html




    <title>Rocket Parallax</title>



    <div id="page-wrap" style="border:none">
        <div id="content" style="margin-left:-30px;margin-top: 0px">
            <div id="parallax" class="clear">
                <div class="parallax-layer" style="width: 500px;height: 250px;margin-left: -100.224px">
                    <img src="rocket.png" style="width:500px;height:250px">
                </div>
                <div class="parallax-layer" style="width: 1200px;height: 300px;margin-top: -222.181px;margin-left: -274.204px">
                    <img src="stars.png" style="width:1200px;height:300px">
                </div>
            </div>
        </div>
    </div>

Je vous avais dit que je vous montrerais comment ajouter les fichiers JS que vous avez récupérés. C’est ce que nous allons voir maintenant. Vous devez terminer votre page HTML avec ceci :

index.html
  
  


CSS

Nous allons ensuite mettre en page et insérer l’arrière-plan à l’aide du CSS. Il faut maintenir les images au même endroit d’où position: absolute.

style.css
#parallax-header { 
	height:200px; background-color:gray; 
 }
#parallax {
	position:relative; overflow:hidden; width:950px; height:250px;
	background-image:url('images/background.png');
}
.parallax-viewport {
	position: relative;     
	overflow: hidden;
}
.parallax-layer {
	position: absolute;
}

JavaScript

Après avoir inséré les scripts en bas de la page HTML, il faut aussi y ajouter ce qui va suivre.

index.html
  jQuery(document).ready(function()
  {
    $('#parallax .parallax-layer')
    .parallax({
      mouseport: $('#parallax')
    });
  });

Résultat

Vous pouvez voir le résultat sur CodePen et comme d’habitude, n’hésitez pas à partager vos oeuvres.

D'après SitePoint.