Réaliser un bouton se déplaçant avec la souris.

Réaliser un bouton se déplaçant avec la souris.

15 avril 2019 0 Par Miss Dev

Comme nous l’avons déjà vue, l’effet parallaxe a beaucoup d’utilité. Il permet de superposer les images pour ainsi donner un effet de dimension. Ici, nous allons voir la position d’un bouton changé en fonction de la souris. Ce bouton a pour utilité d’améliorer sa visibilité.

bouton qui bougent grâce à l'effet parallaxe à la souris

Les besoins de départ

La réalisation de ce mouvement nécessite de récupérer une image au choix. Cette image seras utilisé plusieurs fois à des position et tailles différentes pour donner cet effet de 3D.

Il vous faut également utiliser JQuery et jquery.parallax.js. Pour plus de détails sur comment utiliser ses deux fichiers, je vous invite à aller voir l’article Créer une bannière animée à la souris ? .

Le code

Comme pour la plupart des effets parallaxes, il faut utiliser, dans cet ordre, les langages HTML, CSS et JavaScript.

HTML

Les images qui serviront pour le bouton sont entouré par une balise div. Elles ont aussi chacune une classe différente qui correspond à la superposition des images. C’est l’axe Z.

html
<div id="viewport">
   <img src="images/blue-button.png" alt="" class="layer_1" />
   <img src="images/blue-button.png" alt="" class="layer_2" />
   <img src="images/blue-button.png" alt="" class="layer_3" />
   <img src="images/blue-button.png" alt="" class="layer_4" />
   <img src="images/blue-button.png" alt="" class="layer_5" />
   <img src="images/blue-button.png" alt="" class="layer_6" />
</div>

Ne pas oublier d’ajouter aussi les scripts JS (JQuery et jquery.parallax.js) avant la fermeture de la balise body OU entre la fermeture de la balise body et la fermeture de la balise HTML.

html


CSS

Pour la mise en forme, nous allons nous servir de l’id #viewport qui, rappelons-le, englobe les images superposés.

L’id parent #viewport est en position: relative;   alors que ces enfants, les images, sont en position: absolute; . Cela veut dire qu’elles se positionneront en fonction de l’id viewport.

css
body {
  background-color: rgb(159, 168, 184);
}
#viewport {
	float: left; 
	position: relative; 
	width: 60px; 
	height: 60px; 
	margin: 3.5em 3.2em 0 5em;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.layer_1 { position: absolute; width: 45px; height: 45px; z-index: 101; }
.layer_2 { position: absolute; width: 48px; height: 48px; z-index: 102; }
.layer_3 { position: absolute; width: 52px; height: 52px; z-index: 103; }
.layer_4 { position: absolute; width: 58px; height: 58px; z-index: 104; }
.layer_5 { position: absolute; width: 67px; height: 67px; z-index: 105; }
.layer_6 { position: absolute; width: 80px; height: 80px; z-index: 106; }

JavaScript

On fait appel au fichier jquery.parallax.js initié précédemment. Chaque image va avoir une position X et Y définit avec xparallax et yparallax.

js
  jQuery(document).ready(function(){
      jQuery("#viewport img").parallax(
          { mouseport: jQuery("html") },            // Options
          { xparallax: '6px',    yparallax: '6px' },      // Layer 1
          { xparallax: '12px',   yparallax: '12px' },     // Layer 2
          { xparallax: '30px',   yparallax: '30px' },     // Layer 3
          { xparallax: '54px',   yparallax: '54px' },     // Layer 4
          { xparallax: '84px',   yparallax: '84px' },     // Layer 5
          { xparallax: '120px',  yparallax: '120px' }     // Layer 6
      );
  });

Résultat

See the Pen Parallax button with mouse by Miss Dev (@MissDev) on CodePen.

En bonus

Je me suis amusé à faire ce clown hyper moche. Ehh oui… j’ai le sens du design 😔.

See the Pen Clown parallax button with mouse by Miss Dev (@MissDev) on CodePen.

Comme toujours, n’hésitez pas à partager vos magnifiques (ou pas…) œuvres.

Modifié d’après stephen.band.