Effet de fondu en javascript

Effet de fondu en javascript - HTML/CSS - Programmation

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 :

Code :
  1. #monDiv {
  2. background-position : center top;
  3. }
  4. #monDiv:hover {
  5. background-position : center bottom;
  6. }


 
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

Reply

Marsh Posté le 21-04-2011 à 19:18:06   

Reply

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/ ...

Reply

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.


Message édité par vanish le 22-04-2011 à 01:06:24
Reply

Marsh Posté le 22-04-2011 à 15:15:46    

Merci beaucoup,
je vais regarder tout ça

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed