Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
855 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Effet de fondu en javascript

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Effet de fondu en javascript

n°2071457
adinx
Posté le 21-04-2011 à 19:18:06  profilanswer
 

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

mood
Publicité
Posté le 21-04-2011 à 19:18:06  profilanswer
 

n°2071493
billgatesa​nonym
Posté le 21-04-2011 à 22:26:53  profilanswer
 

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

n°2071510
vanish
Ce qui brûle, brûle !
Posté le 22-04-2011 à 01:00:18  profilanswer
 

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
n°2071673
adinx
Posté le 22-04-2011 à 15:15:46  profilanswer
 

Merci beaucoup,
je vais regarder tout ça


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Effet de fondu en javascript

 

Sujets relatifs
Declaration / appel fonction javascript[Pb] Affichage d'un menu avec un effet carrousel
Rasterisation en JavascriptModifier le css background-image avec Javascript
Javascript & GridView[Javascript] création boutons + onClick
[Javascript] Lier un bouton à un player[Perl / JS] [contourné] récupérer le contenu d'une variable JS
Variable PHP dans une fonction Javascriptun javascript pour faire un effet de fondu?
Plus de sujets relatifs à : Effet de fondu en javascript


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR