jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > De jolis hover en FadeIn

De jolis hover en FadeIn

mardi 17 juin 2008, par baroug

Un effet tout simple mais plutôt sympathique qu’on peut réaliser avec deux lignes de jquery pour animer images et autres logos, au survol.


Prenons une situation classique, dans SPIP — mais a priori, aisément exportable ailleurs — : un bandeau tout ce qu’il y a de plus classique avec un gros logo. Ce logo, comme il est d’usage, renvoie lorsqu’on le clique à la page d’accueil du site. Or, le survoler, la plupart du temps ne produit rien, ce qui est bien dommage quand on aime les clignotements impulsif et qu’on est pas épileptique.

Pour remédier à cela, on pourrait opter pour un hover classique, très facile à mettre en place dans spip avec les logos de survol. Mais ce beau logo amoureusement concocté, éminent symbole de tout le site, mérite mieux. On décide donc de tenter un petit FadeIn. Une opération extrêmement facile.

On commence par installer les deux versions du logo, la normale et celle qu’on veut voir apparaître au survol. Ça donne ceci, par exemple :

Dans la css, on définit la classe .logosurvol comme ceci :

Ce qui permet au logo de survol de se positionner exactement au même endroit que l’autre, et au dessus.

Il suffit en suite de mettre au bon endroit un simplissime code de hover :

Et le tour est joué. Facile, raffiné, et utilisable à peu près partout. Youpi.

P.-S.

En attendant de disposer d’une démo autonome, on peut voir le principe à l’oeuvre sur les blogs de bakchich et sur ce micro site de tests (dans le premier, on voit le principe étendu aux titres de la liste d’articles — mais ça clignote un peu — et dans le dernier, il s’agit d’un assemblage de trois image_typo).

Répondre à cet article

7 Messages de forum


Derniers commentaires

Nouveautés sur le Web