28172 sujets

CSS et mise en forme, CSS3

Opacity et transparence dégradée au passage de la souris !

Salut tout le monde,
Me bienvenue entre vous et sur le forum d'alsacreation que j'apprécie bien Smiley smile

Je viens vers vous pour m'eclaircir sur un sujet que je trouve pas de réponse ailleurs, concernant la transparence dégradée d'un élément au passage de la souris et surtout l'exemple du footer (images des partenaires toutes en bas) du site 13éme rue !

-http://www.13emerue.fr/home.htm

Si vous avez un petit tutorial pour la réalisation de la feuille de style ou le chemin a suivre, et merci d'avance
Bonjour dawdy,

Es-çà que tu souhaites faire ?

http://royalskilled.free.fr/test_dawdy/

si c'est çà te voilà la feuille de style:


#image
{
width: 220px;
height: 51px;
background: url(avatar_clair.png);
}
#image:hover
{
width: 220px;
height: 51px;
background: url(avatar_fonce.png);
}

Modifié par .sC4R (23 Apr 2009 - 21:56)
Enfait non, la methode que vous m'avez proposer etait plus simple avec la propriété opacity,

Ex :

#image {
opacity:0.5;
}
#image:hover {
  opacity:1;
}


Mais si vous essayer de remarquer que c'est peu different sur les images du bas du footer
--> http://www.13emerue.fr/home.htm Smiley cligne
Modifié par dawdy (23 Apr 2009 - 23:38)
Salut Dawdy,
a écrit :
Mais si vous essayer de remarquer que c'est peu different sur les images du bas du footer
Oui, c'est différent car le changement d'opacité n'est pas progressif. Si tu veux exactement la même chose, Florent t'a donné la solution (la méthode fadeTo() de jQuery).
A noter que l'opacité s'applique comme ceci pour être compatible avec ie :
#image {
filter:alpha(opacity = 50);
opacity:0.5;
}


jquery, c'est super, par contre si c'est juste pour faire un effet de fade je ne sais pas si c'est une très bonne idée. Le "plus" pour des visiteurs va être compensé par une petite attente supplémentaire le temps de charger la librairie. A évaluer.

Un effet javascript et une boucle que l'on stoppe une fois l'objectif accompli de la manière suivante (voir les commentaires pour comprendre): 

function fxOpacity(el,duration,from,to){
  
   // le temps au commencement du déclenchement de l'effet
   var startTime = new Date().getTime();

   var timer = setInterval(function(){
	
      // le temps dans la boucle
      var time = new Date().getTime();
		
      // on vérifie que ce temps plus la durée de l'effet ne dépasse pas la temps initial
      if (time < startTime + duration){
		
         // on divise le temps écoulé par la durée, on obtient une fraction de l'avancement
         var p = (time-startTime)/duration;
		  
         // on ajoute ou enlève à l'état initial la fraction du chemin a parcourir
         setOpacity(el,from+(to-from)*p);
      
      }else{	
    	
         // on stoppe tout et applique l'état final
         clearInterval(timer);
         setOpacity(el,to);
			
      }     
   },20);	
};


avec une fonction qui applique l'opacité

function setOpacity(obj,opacity){
  var o = (opacity >= 1)? 1 : Math.round(opacity*100)/100;
  obj.style.opacity = o;
	obj.style.filter = 'alpha(opacity=' + (o*100) + ')';
};


Il te reste plus qu' a appliquer ton effet, dans l'exemple suivant il sera appliqué à toutes les balises "a" de l'élément ayant une id "footer"

window.onload = function(){

  footerLinks = document.getElementById('footer').getElementsByTagName('a');

  for (var j=0, l=footerLinks.length; j<l; j++){
    footerLinks[j].onmouseover = function(){ 
      fxOpacity(this,400,0.4,1) 
    };
    footerLinks[j].onmouseout = function(){ 
      fxOpacity(this,400,1,0.4) 
    };
  };
   
};


Ce qui donne http://www.mozaik.com.mx/effects/opacity.html

La plupart des librairies javascript applique les effets sur ce modèle.

Exactement sur ce principe j'avais codé une petite classe dont je me sert souvent qui permet de faire la même chose sur plusieurs éléments à la fois et sur plusieurs plusieurs propriété a la fois : http://www.mozaik.com.mx/effects/ cela permet de pouvoir jouer avec ce genre d'effets sans forcement inclure de grosse bibliothèques.
Modifié par matmat (24 Apr 2009 - 19:13)
Sujet clos
Aller à