En fonction de la position de la souris sur l'objet à tilter, on applique un css transform rotateY + skewY et/ou rotateX + skewXpour le plus grand bonheur des grands et des petits.
Inclure le petit constructeur javascript (4.40 Ko) dans sa page.
<script type="text/javascript" src="js/tiltit.js"></script>
Déclarer les objets en bas de page :
var tilt = document.querySelectorAll('.tiltit');
for(var i=0; i<tilt.length; i++){
new TiltIt( tilt[i]);
}
L'objet à tilter doit avoir une position: relative; car le constructeur joue sur son z-index pour qu'il soit toujours par-dessus les autres.
Et un transition: transform 0.35s ease-out; pour que le mouvement ne soit pas haché.
D'ailleurs, on peut jouer sur ce paramètre pour obtenir un effet plus ou moins dynamique.
0.35s me semble pas mal mais on pourra préférer plus dynamique à 0.2s ou plus smooooooth à 0.5s...
Ce sont les seuls pré-requis CSS.
rotateY et skewY
ça marche nickel aussi car la perspective appliquée est une fraction de la largeur du bloc (1/4).
Pour éviter que le rollover s'arrête lorsque la transformation fait sortir l'objet de sous la souris, on peut choisir d'appliquer l'effet à un enfant du bloc .tiltit.
Il faut ajouter un data-tilt-child="1" au parent et l'enfant doit avoir la classe .tilt-child.
Du texte immobile
Lorem ipsum dolor sit amet, idque graeci vidisse ius ut. Duo ex patrioque iracundia. Mei te elit decore. Mazim mundi usu te, cu nec prodesset voluptatum. Ne modo vidisse atomorum sit, quod dolorem civibus no eos. Mea eu tamquam epicurei praesent, etiam aperiri aliquando ea vis.
Eu duo nobis maiestatis, ea tacimates salutatus reprimique sea. Paulo invidunt qualisque cu sit, ut qualisque elaboraret eos, oratio molestiae has et. Vim dicam voluptaria id, mea no omnis ocurreret. Labore discere id nam, at per labitur partiendo, inermis offendit accusamus no vix. Mea te soleat detracto, cum quis oblique persecuti ut.
Duis fabulas vim ea, ei sea ullum doming iracundia. Tota graece consequuntur at vel. Has at impedit apeirian, cum ad apeirian persecuti, ut mucius putent vix. Et eum nisl sapientem rationibus, id alia assum ridens eos, quo ea sale numquam. Ad nisl sadipscing sed. His agam posse eleifend cu, choro omittantur vix ex, habeo soleat labitur duo ex. Mel explicari constituam delicatissimi ei, dicant albucius qui ut.
Eu vero recteque eos, nonumes phaedrum adipiscing at pri, te ancillae placerat mediocritatem quo. Vis in essent fastidii oporteat, per ut feugait recusabo repudiandae, et ius case luptatum. Semper apeirian dissentiet ad vim, ex sea maiestatis ullamcorper. In vix vide eius audire, facete aliquam ea vel, ad eos ludus mentitum. Et pro quas novum rationibus, tantas veritus blandit an ius.
In nam meliore maiorum pertinax, cu accumsan repudiandae nec. His ex aliquip explicari. Pro dissentias reformidans ad. Ne aeterno maiestatis quo, oratio ullamcorper ut eos. Id sed quis impetus, eos nisl wisi no, et nobis soluta repudiandae vis.
ça marche très bien, pas de raison !
Oui, bon, ça a assez peu d'intérêt, c'est juste pour visualiser l'effet skew seul !
Rajouter data-tilt="skew".
rotateX et skewX
Rajouter data-tilt="x".
Rajouter data-tilt="xy".
Avec un grand bloc, ça marche aussi...
Rajouter data-tilt="ry".
Rajouter data-tilt="rx".
Rajouter data-tilt="rxy".
Les plus observateurs auront noté que rotateY donne un effet de tilt horizontal et rotateX un effet de tilt vertical...!
On peut aussi inverser le sens de rotation avec data-tilt-reverse="1".
On peut aussi jouer sur la perspective avec data-tilt-ratio="N", dans les exemples ci-dessous N=0.5 (ce qui multiplie l'effet de perspective par deux).
On peut aussi accentuer le mouvement avec data-tilt-multi="N", dans les exemples ci-dessous N=3, puis 4, puis 5, puis 6 (ce qui multiplie le déplacement par... 3, puis 4, puis 5, puis 6 !).