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.

jquery et css effets

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 !

jquery et css effets

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

jquery et css effets

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 !

jquery et css effets

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.

jquery et css effets

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 !

jquery et css effets

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 !

jquery et css effets

Voir la démo en ligne

Animation sur Flat icones

Petits effets de survols sur des icones, mais qui peuvent faire leurs petits effets !

jquery et css 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).

jquery et css effets

Voir la démo en ligne

Animation typographique

Passez la souris sur le texte pour avoir un effet de grossissement, vraiment étonnant.

jquery et css effets

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 !

jquery et css effets

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 !

Commentaires