clic
clic
Effet repéré sur https://theorosel.com/ reproduit à la régaloeb !
Et contrairement à l'original, ma version est fonctionnelle avec Safari sous Mac !
Reste cet effet de flou pendant les transformations avec OSX... à suivre !
Les méthodes habituelles -webkit-transform:translateZ; -webkit-filter:blur(0px); ou will-change:transform; laissent le flou même après les transformations...!
Inclure le petit constructeur javascript (3.05 Ko) dans sa page.
<script type="text/javascript" src="js/rollMouse.js"></script>
Déclarer les objets en bas de page :
var rollMouse = document.querySelectorAll('.rollMouse');
for(var i=0; i<rollMouse.length; i++){
new RollMouse( rollMouse[i] );
}
<a href="#" class="rollMouse rollMouse-design">
<div class="rollMouseMove rollMouseMove-design">clic</div>
</a>
Par défaut, le zoom effectué est de 2 mais on peut le modifier avec un attribut data : data-rollMouse-zoom="3"
<a href="#" class="rollMouse rollMouse-design" data-rollMouse-zoom="3">
<div class="rollMouseMove rollMouseMove-design">clic</div>
</a>
.rollMouse{
position: relative;
}
.rollMouse .rollMouseMove{
transition: transform 0.45s ease-out;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50%;
transform: translate(-50%, -50%);
}
Ce sont les seuls pré-requis CSS.
On peut jouer sur la durée de la transition pour obtenir un effet plus ou moins dynamique.
0.45s me semble pas mal mais on pourra préférer plus dynamique à 0.2s ou plus smooooooth à 0.6s...
Après, libre à vous d'appliquer le design souhaité aux éléments .rollMouse et .rollMouseMove.
Mais la largeur et la hauteur de l'élément mobile ne doivent pas dépasser 60% de son conteneur sinon, il ne sort jamais de sous la souris !...
50% est l'idéal.