10 exemples incroyables d’effets de survol en jQuery / CSS3
Le développement de site internet notamment du front end passe aujourd’hui exclusivement via l’élaboration d’une expérience utilisateur adaptée et optimisée. Pour rendre cette expérience toujours plus dynamique et attractive le JS et notamment ces frameworks comme jQuery sont apparu. D’années en années les effets sont de plus en plus sophistiquées permis grâce notamment à l’évolution des navigateurs (et donc par la force de choses des langages comme le CSS3).
Je suis toujours étonnée lorsque je vois certains effets réalisés par des intégrateurs, et surtout les effets de survols et de clicks. Souvent je trouve ces effets sur le site codrops mais de nombreux intégrateurs partagent leurs codes avec la communauté.
Voici une petite sélection des plus beaux effets que j’ai vu sur internet ces dernières semaines.
Effet d’expension
Sous forme d’une application météo, cliquez sur l’un des blocs et celui-ci s’étend en full screen dévoilant un nouveau contenu.
Effet de 3D sur une vignette
Passer le souris sur l’une des images pour découvrir un effet de 3D directement appliquer sur la vignette !
Effet d’hover radial
Passez la souris sur l’image pour découvrir un effet de survol en forme de rond (j’aime beaucoup l’effet partant du centre du rond).
Effet d’hover radial 2
D’autres effets de survols sur des ronds, personnellement je trouve ceux la incroyable !
Image qui cache le contenus
Ici au survol l’image glisse pour laisser apparaitre des contenus qui étaient cachés sous l’image.
Effet de 3D sur boite
Passez la souris sur le bloc pour avoir une animation 3D de boite qui se tourne, la je suis bluffé, à tester absolument !
Livre qui s’ouvre
Au passage de la souris le livre s’ouvre et les pages se tournent, pareil je sais pas quoi dire tant l’animation est incroyable !
Animation sur Flat icones
Petits effets de survols sur des icones, mais qui peuvent faire leurs petits effets !
Effet pile ou face
Passez la souris sur l’image pour découvrir une animation de pièce qui pivote (laissant découvrir une seconde image).
Animation typographique
Passez la souris sur le texte pour avoir un effet de grossissement, vraiment étonnant.
Boutons évolués
Des effets d’animations qui vous révolutionner vos boutons de navigations. A tester absolument si vous voulez augmenter votre taux de clics !
Voila c’est tout pour aujourd’hui, j’espère que vous aurez été autant étonné que mois en découvrant ces effets. Il me reste encore beaucoup de liens à vous présenter, alors repasser prochainement pour découvrir la suite !
Commentaires
lauren
« Image qui cache le contenus » dommage marche pas