Fondu (fade in fade out) d'une image à l'autre au passage du curseur

Fondu (fade in fade out) d'une image à l'autre au passage du curseur - HTML/CSS - Programmation

Marsh Posté le 29-06-2008 à 18:44:08    

Bonjour tout le monde :)  
 
La question est assez simple, je voudrais donner un effet comme celui présent sur ce site  
http://www.liquid.fm/
je trouve l'effet au passage de la souris sur le titre excellent :D  (pour ceux qui aime la Trance c'est une bonne radio, bref passons)
 
Vous vous doutez bien que j'ai regarde le code source :o  
mais c'est un peu brumeux pour moi, j'ai bien compris que ça marche avec du Javascript, mais après j'arrive à rien (je connais rien au JS :( ).  
En regardant les sources j'ai vu qu'ils utilisent la librairie "mootools".  
 
Je suis allé sur leur site et dans la démo j'ai trouvé qqch qui se rapproche de ce que je veux faire  
http://demos.mootools.net/Mouseenter
(exemple 1 avec le carré vert)
 
Mais quant j'essaye de mettre des images à la place ça marche pas  [:autobahn]  
 
Alors je n'ai pas forcément envie d'utiliser cette librairie, surtout que je veux juste faire cet effet pour les boutons de mon menu.  
Je n'irais pas jusqu'à demander de me faire le code (quoi que :whistle: ) mais auriez vous des pistes qui pourrait m'aider ? (non pas de gif animé :o)
 
 
merci d'avance :D
 

Message cité 1 fois

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 29-06-2008 à 18:44:08   

Reply

Marsh Posté le 29-06-2008 à 19:29:57    

bah ca marche avec deux images et un dégradé d opacité :??:


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 29-06-2008 à 21:40:46    

on fait comment ?


---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 30-06-2008 à 11:24:31    

up  [:cerveau sad]  


---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 30-06-2008 à 14:01:18    

tu mets en fond  la fin du fondu et au dessus l image "normale"
tu reduis l opacité de la premiere au mouseenter et c est plié
enfin bon tu regardes le code source quoi
http://www.liquid.fm/images/liquidfmlogo.png
http://www.liquid.fm/images/liquidfmlogo_spotlight.png


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-06-2008 à 15:40:40    

mouais enfin c'est pas si simple j'ai dû magouiller...  
en fait si on veut vraiment faire comme ça, il faut mettre un span dans un div, avec le Div qui à l'image non illuminée et dans le span on fera la variation du logo illuminé.  
Dans l'exemple il y a un paramètre "backgroundColor: color" qui doit probablement le forcer à retourner en arrière, mais je sais pas ce qu'il faut mettre pour une image, c'est pour ça que j'ai fais ça... en tout cas j'ai pas trouvé sur le site où il défini le logo_spotlight.png.


---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 30-06-2008 à 16:44:24    

Code :
  1. <span id="logo" class="spotlight correct-png"> 
  2. <span style="width: 434px; height: 86px; display: block; background-image: url(http://www.liquid.fm/images/liquidfmlogo_spotlight.png); visibility: hidden; opacity: 0;"/> 
  3. </span>


mais bon c est un peu nase comme methode
tu fous juste ton image dans un div
 
genre  

Code :
  1. <div style="background-image:url(spotlight.png)"> 
  2.     <img src="logo.png"> 
  3. </div>


et l effet est tres simple a realiser sans mootools
un petit setInterval des familles
et tu accedes a l opacité d un element en faisant elm.style.opacity


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-06-2008 à 17:08:36    

t'en gentil, mais j'y connais rien en JS, c'est pour ça que je demande.

Message cité 1 fois

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 30-06-2008 à 18:01:44    

Rio Grande a écrit :

Je n'irais pas jusqu'à demander de me faire le code (quoi que :whistle: ) mais auriez vous des pistes qui pourrait m'aider ? (non pas de gif animé :o)


 

Rio Grande a écrit :

t'en gentil, mais j'y connais rien en JS, c'est pour ça que je demande.


 
je t ai donné les pistes [:cosmoschtroumpf]
sinon jte donne un exemple mais c est pas aussi souple que mootools

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> 
  3. <head> 
  4.     <title>Test</title> 
  5.     <script type="text/javascript"> 
  6.  
  7. function fadeImages(id,nbTrans,delay) { 
  8.  
  9.     var elm = document.getElementById(id).getElementsByTagName('img')[0]; // l element qui doit etre dégradé 
  10.     elm.style.opacity = 1; 
  11.      
  12.     elm.onmouseover = function() {makeTrans(1);} 
  13.     elm.onmouseout = function() {makeTrans(0);} 
  14.      
  15.     function makeTrans(start) { 
  16.         var opacity = start; 
  17.         var interval = setInterval(function() { 
  18.             elm.style.filter = "alpha(opacity="+100*opacity+" )"; 
  19.             elm.style.opacity = opacity; 
  20.             opacity += Math.pow(-start,start)/nbTrans; 
  21.             if (opacity<0 || opacity>1) { 
  22.                 clearInterval(interval); 
  23.                 var end = start == 1 ? 0 :1 
  24.                 elm.style.filter = "alpha(opacity="+100*end+" )"; 
  25.                 elm.style.opacity = end; 
  26.             } 
  27.         },delay); 
  28.      
  29.     } 
  30.  
  31.          
  32. } 
  33.  
  34. onload = function() { 
  35.     fadeImages("logo",50,20); 
  36. }; 
  37.     </script> 
  38.     <style type="text/css"> 
  39. #logo {height:86px;width:434px;background:url(spotlight.png) no-repeat;} 
  40.     </style> 
  41. </head> 
  42. <body>             
  43. <div id="logo" style=""> 
  44.     <img src="logo.png"> 
  45. </div> 
  46.  
  47. </body></html>


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-06-2008 à 18:15:48    

en effet, il faut pas passer vite sur le logo au risque d'avoir un crise d'épilepsie :D
je vais voir si j'arrive à piger qqch au code que tu m'as passé.


---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 30-06-2008 à 18:15:48   

Reply

Marsh Posté le 30-06-2008 à 18:25:18    

y a evidemment moyen de faire plus souple en js pur, mais je t avoue que j ai la flemme et comme j avais deja une fonction analogue a celle ci qui trainait dans mes archives ...
 
au moins la t as l idee de base sur du code plutot simple: une fonction qui se repete, tu fais varier l opacité dans le sens qui te plait et tu l appliques a ton element
les lignes 18 et 24 sont pour ie6, les lignes 19 et 25 pour tous les autres


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 03-07-2008 à 15:32:45    

putain chuis con c etait tout bete [:tinostar]
 

Code :
  1. function fadeImages(id,nbTrans,delay) {
  2.  
  3.     var elm = document.getElementById(id).getElementsByTagName('img')[0]; // l element qui doit etre dégradé
  4.     elm.style.opacity = 1;
  5.     var interval;
  6.     
  7.     elm.onmouseover = function() {if (interval) clearInterval(interval);makeTrans(1);}
  8.     elm.onmouseout = function() {if (interval) clearInterval(interval);makeTrans(0);}
  9.     
  10.     function makeTrans(start) {
  11.         var opacity = start;
  12.         interval = setInterval(function() {
  13.             elm.style.filter = "alpha(opacity="+100*opacity+" )";
  14.             elm.style.opacity = opacity;
  15.             opacity += Math.pow(-start,start)/nbTrans;
  16.             if (opacity<0 || opacity>1) {
  17.                 clearInterval(interval);
  18.                 var end = start == 1 ? 0 :1
  19.                 elm.style.filter = "alpha(opacity="+100*end+" )";
  20.                 elm.style.opacity = end;
  21.             }
  22.         },delay);
  23.     
  24.     }
  25.  
  26.         
  27. }
  28.  
  29. onload = function() {
  30.     fadeImages("logo",50,20);
  31. };


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 05-07-2008 à 18:33:29    

mieux, mais quand on se retire avant la fin du fade, l'image passe directement à l'image "complète" pour en suite retourner à l'image initiale.


---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site :  NFS-Mania.com
Reply

Marsh Posté le 05-07-2008 à 20:15:14    

bah en fait je suis du genre radin donc mootools je trouve ca completement overkill pour ce genre d effets
j avoue que je suis pas vraiment au point sur ce genre de trucs (je suis en train de developper une petite bibliotheque pour mon usage personnel)
mais si tu as juste besoin de ce genre d effets pour ton site je te conseille bytefx
essaie juste un peu de comprendre ce que fait mon code et regarde ici
http://developer.mozilla.org/en/do [...] _Reference et la  
http://developer.mozilla.org/en/do [...] _Reference
pour les fonctions qui te paraissent obscures et apres mootools et bytefx te deviendront simples d utilisation
si t as questions hesite pas


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

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