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.
Voir la démo en ligne
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 !
Voir la démo en ligne
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).
Voir la démo en ligne
Effet d’hover radial 2
D’autres effets de survols sur des ronds, personnellement je trouve ceux la incroyable !
Voir la démo en ligne
Image qui cache le contenus
Ici au survol l’image glisse pour laisser apparaitre des contenus qui étaient cachés sous l’image.
Voir la démo en ligne
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 !
Voir la démo en ligne
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 !
Voir la démo en ligne
Animation sur Flat icones
Petits effets de survols sur des icones, mais qui peuvent faire leurs petits effets !
Voir la démo en ligne
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).
Actualités du numériquePourquoi mon iPhone affiche-t-il une lumière rouge ?
Voir la démo en ligne
Animation typographique
Passez la souris sur le texte pour avoir un effet de grossissement, vraiment étonnant.
Voir la démo en ligne
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 !
Voir la démo en ligne
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 !
