hover tilt à la regaloeb

En javascript Vanilla

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]);
}

CSS

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.

Démos

Par défaut:

rotateY et skewY

R
E
G
A
L


Avec un grand bloc

ça marche nickel aussi car la perspective appliquée est une fraction de la largeur du bloc (1/4).

REGAL


Effet sur un enfant

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.

REGAL

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.



Avec des images aussi

ça marche très bien, pas de raison !

Juste le skew

Oui, bon, ça a assez peu d'intérêt, c'est juste pour visualiser l'effet skew seul !
Rajouter data-tilt="skew".

R

Juste le mouvement X

rotateX et skewX
Rajouter data-tilt="x".

E

Both, x et y

Rajouter data-tilt="xy".

G
A
L

Avec un grand bloc, ça marche aussi...

REGAL


Juste le rotateY

Rajouter data-tilt="ry".



Juste le rotateX

Rajouter data-tilt="rx".



RotateY + rotateX

Rajouter data-tilt="rxy".



Les plus observateurs auront noté que rotateY donne un effet de tilt horizontal et rotateX un effet de tilt vertical...!

Reverse

On peut aussi inverser le sens de rotation avec data-tilt-reverse="1".



Ratio perspective

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).

L
E
B


Multiplicateur d'effet

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 !).

L
E
B

À vous de jouer !