, ,

6 Effets de Rollover avec jQuery et CSS3

Quelques Effets de Rollover avec jQuery et CSS3

Aujourd’hui je vais vous montrez quelques effets de « mouse over » intéressants utilisant jQuery et CSS3. Les effets de « mouse over », rollover, pour peu qu’il soit bien géré sont très attirant pour vos visiteurs qui prendront plaisir à la navigation sur votre site, l’expérience utilisateur en sera bien meilleur. Voici la liste de 6 effets jQuery des plus impressionnants avec différent style.

À Noter : Ces effets marcheront uniquement sur les navigateurs qui supportent ces fonctions, donc pensez à faire les mises à jour de vos navigateurs si ils sont obsolètes.

Direction-Aware Hover Effect

Un effet des plus sympa sur une mosaïques d’images, la première image que vous survolerez va définir la manière dont la prochaine miniature va interagir au survol de cette dernière.Plusieurs effets sont possibles : Normal, Delay et Inverse. Ce système combine l’utilisation de jQuery ainsi que CSS3. Un effet qui peut prendre tous son charme sur votre Portfolio par exemple.

Direction-Aware Hover

Demo | Source | GitHub

jQuery.popeye

jQuery popeye est un script utilisant la librairie Javascript de jQuery pour générer une galerie d’image avancée. Ce script vous permettra de gagner de la place quand vous afficherez une série d’image et offre à vos utilisateurs un moyen simple et convivial de visualier les images en plus grand sans perdre le fil de lecture.Ce système combine l’utilisation de jQuery ainsi que CSS3.

De plus un plugin WordPress est également prévu et c’est vraiment un plugin fantastique pour mettre en avant vos articles.

jQuery popeye

Demo | Source | Plugin WordPress

Fading Magnifying Effect

Un effet de mouse hover sympa en dégradé. Ce qui est génial, c’est que nous avons le choix d’utilisation soit avec jQuery ou en CSS3

Fading Magnifying

Demo | Source

3D Thumbnail Hover Effect

Un de mes préférés par les effets proposés. L’idée est certainement reprise de la navigation de page du célèbre « Google SketchUp Showcase ».
5 Effets différents possibles à votre guise.Nécessite jQuery et navigateurs compatible CSS3

3D Thumbnail

Demo | Source

Circle Hover Effects

Un plugin avec des effets de survol sur des cercle très fun qui est uniquement en CSS. J’affectionne particulièrement ce plugin aussi car les miniatures en formes de rond changent des ordinaires rectangles et permettent ainsi d’avoir un rendu plus intéressent et permettra ainsi de sublimer l’effet désiré, le plugin propose 7 différents types d’animation en fonction de vos envies.

3D Circle
3D Circle

Demo | Source

CSS3 Hover Effects

CSS3 Hover

Le dernier de notre liste, créé en CSS3 et HTML5. De toute évidence vous aurez un superbe rendu avec les derniers navigateurs à jour tel que Chrome ou Firefox.

Demo | Source

Written by Fredods

Passionné de voyage, nourriture, cocktails. Travaillant dans le monde du e-Commerce et du Digital, je partage mes passions et conseils à travers ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CAPTCHA