Aller au contenu

Animation sur le hover d'un texte


AvenueDuWeb

Sujets conseillés

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.

@+

Lien vers le commentaire
Partager sur d’autres 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. @+

Lien vers le commentaire
Partager sur d’autres 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).

Lien vers le commentaire
Partager sur d’autres 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. @+

Lien vers le commentaire
Partager sur d’autres 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...

Lien vers le commentaire
Partager sur d’autres 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 ;)

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...