webdevpro.net

Nous allons réaliser dans cette article un bouton de partage qui va avoir le comportement suivant : lorsque l’on clique sur le bouton share, il bouton de partage apparaissent par homothétie :

HTML à animer

<div> 
  <i class="fas fa-share-alt-square fa--big" id="share"></i> 
</div> 
<div id="share-target" class="share-target"> 
  <i class="fab fa-500px fa--middle"></i> 
  <i class="fas fa-address-card fa--middle"></i> 
  <i class="fas fa-adjust fa--middle"></i> 
</div>

CSS

utilisation de la librairie fontawesome pour insérer les miniatures
Le CSS permet d’ajouter l’effet d’apparition par homothétie + un effet de changement de couleur sur le bouton de partage :

 .fas, .fab{ 
transition: color 1s; 
} 

.fas:hover, .fab:hover{ 
  cursor: pointer; 
  color:#b4e9e2; 
} 

.fa--big{ 
  font-size: 2em; 
} 

.fa--middle{ 
  font-size: 1.5em; 
} 

.share-target{ 
  transform: scale(0); 
  transform-origin: top left; 
  transition: transform 0.5s; 
} 

.share-target.open{ 
 transform: scale(1); 
} 

JavaScript

Permet d’ajouter la class .open au bouton permettant d’afficher les liens de partage :

(function(){ 
 function $(el) { 
  return document.getElementById(el); 
 } 
 $("share").addEventListener("click",function(){ 
  $("share-target").classList.toggle("open"); 
 }); 
})();