Jump to content

Animation sur le hover d'un texte


AvenueDuWeb

Recommended Posts

Bonjour à tous,

J'espère trouver une solution à mon problème car là ça fait plusieurs jours que je cherche à droite et à gauche et je ne trouve rien qui corresponde ou que je comprenne. Alors précision, le javascript et moi, on est pas les meilleurs amis à la base, mais depuis quelques temps je m'y suis mis. Mais que du basique avec jquery, et des lightbox, sliders... Et là j'ai une petite demande un peu plus complexe (enfin qui me semble l'être), je souhaite faire une animation aléatoire (enfin au moins qui s'adapte à la taille du texte) à partir d'une seule petite image. En gros, j'ai un menu, si je clique sur un élément, je voudrais que quelques dizaines de petites étoiles éclatent d'un coup au milieu du texte (après avoir lancé un effet de surbrillance) et disparaissent progressivement.

Comme je sens que mon explication n'est pas claire, je cherche à reproduire l'effet de ce site (qui est en flash). C'est d'ailleurs pour transformer ce site flash en site html/css avec si possible un minimum de flash (j'aurai normalement 2-3 anims flash mais qui n'empêcheront pas la navigation pour les internautes n'ayant pas le plugin).

Donc je cherche une solution, si possible avec jquery pour réaliser un effet relativement similaire donc si quelqu'un a une piste à me donner, un tutorial, un extrait de code... je suis preneur.

Merci d'avance.

@+

Link to comment
Share on other sites

Bonjour,

Cet effet est-il réellement indispensable ?

Bonjour,

Malheureusement pour moi : oui... Le client le veut absolument.

Mais même sur le forum jquery je n'ai pas de réponses intéressantes. J'ai bien trouvé 2-3 docs, pour animer avec jquery, mais il faut en plus gérer le côté aléatoire et également le fait que ce soit simplement sur un lien.

Merci quand même. @+

Link to comment
Share on other sites

En jQuery, tu vas quand même bien galérer pour pas grand-chose ...

A la rigueur, pourquoi ne ferais-tu pas les liens seulement en flash ? (Par contre, fais en sorte que le flash remplace les liens "normaux" au chargement de la page via jQuery).

Link to comment
Share on other sites

(Par contre, fais en sorte que le flash remplace les liens "normaux" au chargement de la page via jQuery).

Ca peut m'intéresser, si tu as plus d'explications à ce sujet... car le flash et moi on a jamais été très bons amis... J'ai d'ailleurs les sources flash (juste de la petite animation), mais il faudrait que je fasse un menu déroulant en flash avec l'accès à la base de données pour gérer les différentes pages du site (là le problème du site non fait par moi c'est qu'il n'y a aucun back office, ce que je veux créer pour ce client plus quelques modifs, mais cette animation sur les menus me perturbe).

Merci encore. @+

Link to comment
Share on other sites

d'après ce que j'ai pu lire dernièrement (faut que je retrouve l'artile ou si quelqu un l'a)

adobe prépare un soft pour transformer le flash en html5.

et autrement simplement en html5 ca doit etre possible...

Link to comment
Share on other sites

Elembius : tu parles sans doute de Wallaby.

Pour l'effet en HTML 5, ça peut être assez compliqué à gérer.

Je m'étais aussi dit qu'une simple image de fond en gif animé pourrait éventuellement convenir, mais on n'aurait pas l'effet de flou autour du texte, et la dispersion des particules serait fatalement moins importante.

Il y a aussi la dernière solution : convaincre la cliente que cet effet est parfaitement dispensable ;)

Link to comment
Share on other sites

L'effet est tout de même joli et il a l'avantage d'être dans le sujet (les bijoux)...

En JS, ça va être dur de faire aussi délicat mais ce n'est pas infaisable.

Gérer les lucioles une par une et les déplacer serait la solution la plus immédiate, mais avec 30 ou 50, il faut que ça reste smooth...

Sinon, on peut placer un GIF animé dans in DIV au dessus, beaucoup plus large que l'option cliquable en jouant sur la transparence pour avoir les bords flous des lucioles (qui sera de toute façons le plus problématique, notamment la façon dont elles s'éteignent doucement). Mais bon, il faut créer le GIF animé... et on revient à la nécessité d'écrire un petit programme.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...