JS – CSS – Boutons de partage animés

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 :

rendu de l’animation

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");
});
})();