Effet de fondu en javascript - HTML/CSS - Programmation
Marsh Posté le 21-04-2011 à 22:26:53
Il ne me semble pas qu'il existât des choses très simples pour réaliser cela.
Si vous avez des exemples de sites qui font cela, il pourrait être intéressant de voir comment cela marche en regardant le code source.
Une petite recherche avec mon copain Gogol me donne, par exemple http://foxbot.fr/fade-in-fade-out-en-javascript/ , http://stikiflem.wordpress.com/200 [...] nfade-out/ , http://www.developpez.net/forums/d [...] ges-chere/ , http://javascript.about.com/b/2007 [...] ffects.htm , http://javascript.about.com/gi/dyn [...] ansitions/ ...
Marsh Posté le 22-04-2011 à 01:00:18
Salut,
se former a jquery c'est très simple, tu tapes "jquery tutoriel" dans google
De plus la doc officiel est très bien faite.
Quelques pistes pr ton prob en particulier :
- tout d'abord passer par un background de l'element ça n'ira pas, sauf si il n'y a pas de contenu dedans, car la propriété css opacity touche obligatoirement tout l'element et ses enfants.
- ensuite vu que c'est entre deux images que tu veux faire le fondu, et non pas d'une image vers la transparence, au court de ton animation les deux images sont visibles en même temps, la encore ça ne passera pas par le background d'un seul élèment
Sauf si tu choisis une solution surement très efficace une fois mise en place, mais assez lourde a faire : te faire une image comprenant toute les etapes du fondu et changer la position du background. Là un simple setInterval fera l'affaire au mouseOver.
Autrement je verrais ça comme ça :
- ton div de contenu en absolute au premier plan
- les deux images en absolute egalement en dessous de ton div de contenu
(pr gere plus proprement le positionnement dans ton site, surtout si tu en a plusieurs, mieux vaudra sans doute mettre le tout dans un parent en position relative)
Ensuite il te suffit de lancer fadeIn sur l'une et fadeOut sur l'autre image au moment du over/out.
(ou d'autres variations selon le style de fondu voulu)
Sinon Jquery n'invente pas, il simplifie. ça peut aussi etre formateur de faire l'anime toi meme :
- setInterval pr appeler une fonction a intevral regulier
- ensuite jouer sur les propriétés css d'opacity et consorts pr le crossplatform.
Marsh Posté le 21-04-2011 à 19:18:06
Mon problème est hyper simple, mais je suis encore une nouille en javascript alors j'ai du mal.
J'ai un div avec une image d'arrière-plan qui contient l'effet normal et l'effet survolé.
En CSS, ça donne ça :
Tout ce que je voudrais, c'est que la transition se fasse via un petit effet de fondu sympa.
D'ailleurs, en passant, vous connaissez un moyen de se former sur le javascript et jQuery.
Merci beaucoup