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.
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.
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
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
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.
CSS3 Hover Effects
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.