Efecto de transición FadeIn en imágenes con JavaScript

Hace unos días postee un aporte con una traducción y su explicación de algo que encontré por ahí sobre como hacer FadeIn en un div con un par de funciones de JavaScript, des pues de jugar un rato esto es lo que logré:

HTML
un div comun y corriente

Código :

<body>
<div id="fading">
<h1>Cristalab</h1>
</div>

CSS
algo de estilo para dicho div:

Código :

#fading {
  width:300px; 
  height:75px;
  border: medium solid #E70;
  background:silver;
  padding:10px;
  font-family: verdana;
  color:#EEE;
  text-align:center;
  letter-spacing:5px;  
}

JavaScript
el codigo es bastante sencillo, en primer lugar declaramos un par de variables

Código :

var time;
var transparency = 0;

ahora vamos con la funcion propiamente dicha:

Código :

function fadeIn() {
  //
  //incrementamos el valor
  transparency += 5; 
  //si termino la trnsicion borramos el intervalo
  transparency = (transparency == 100) ? clearInterval(time) : transparency;
  //seteamos al div como objeto para poder usarlo
  obj = document.getElementById('fading');
  //programamos cada navegador por separado
  if (document.all){ 
    //esto es para IE, como siempre hay q programarlo a parte
    obj.style.filter = 'alpha(opacity='+transparency+')';
  }else{
    // Safari 1.2, posterior Firefox y Mozilla, CSS3
    obj.style.opacity = transparency /100;
    
    // anteriores Mozilla y Firefox
    obj.style.MozOpacity = transparency /100;
    
    // Safari anterior a 1.2, Konqueror
    obj.style.KHTMLOpacity = transparency /100;  
  } 
};

y luego en el evento onLoad de la pagina, llamamos a la función fadeIn() cada 100 milisegundos:

Código :

window.onload = function() {
  //
  time = setInterval('fadeIn()',100);
};

bastante sencillo, no les parece? aqui hay un ejemplo funcionando
:wink:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Efecto de transición FadeIn en imágenes con JavaScript

Publica tu comentario

o puedes...