Estás en: Cristalab > Tips > Efecto de transición FadeIn en imágenes con JavaScript

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

Por: penHolder + 02.04.2008

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
Guiño

javascript

Comentarios | Enviar un comentario

Muy bueno pH! Thumbs up

Por: CarlosRuminott

hay un error en el enlace Apenado

//
este es el ejemplo del codigo
//
Por: penHolder

Juas! Con razón vi que el fade era a una imagen y me estaba preguntando que carajos hacian propiedades CSS de texto ahí. Muy buen PH. Gracias!
Por: Kinduff

No consigo ver el ejemplo... Triste

Alguien me da norte???
Por: Señor Muñoz_blog

Señor Muñoz_blog :

No consigo ver el ejemplo... Triste

Alguien me da norte???

No uses internet explorer U_U

Por: CarlosRuminott

CarlosRuminott :

Señor Muñoz_blog :

No consigo ver el ejemplo... Triste

Alguien me da norte???

No uses internet explorer U_U

en IE tambien se ve, solo q tiene un bug al principio, pero se ve ...a ver si lo arreglo.
Por: penHolder

ya lo arregle, habia q ocultar el div al cargar, y luego habilitar la visibilidad en la funcion; entonces el codigo quedaria asi:

Código :


<script type="text/javascript">
document.write("<style type='text/css'>#fading {visibility:hidden;}</style>")
//
var time;
var transparency = 0;
//
function fadeIn() {
  //
  transparency += 5; //
  transparency = (transparency == 100) ? clearInterval(time) : transparency;
  //
  obj = document.getElementById('fading');
  obj.style.visibility = 'visible';
  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;  
    
  } 
};
//
window.onload = function() {
  //
  time = setInterval('fadeIn()',100);
};
</script>

Por: penHolder

Buenas,

Me gustaría aportar mi pequeño granito de arena.

Yo este tipo de efecto en vez de hacerlo con este código lo haría directamente utilizando la librería jQuery. Con ello, nos aseguraremos que el correcto funcionamiento en los navegadores actuales sin ningún tipo de problema.

Después de la inclusión del fichero jQuery.js, realizar este efecto sería tan sencillo como:
<pre>
$('#nombreId').fadeIn('normal');
</pre>

Dónde nombreId es el id del objeto al cual queremos hacer un fadeIn.

Si queremos hacer por ejemplo que una imagen hace un fadeOut, cargamos otra imágen y luego hacemos un fadeIn, sería tan sencillo como:

<pre>
$('#nombreId').fadeOut('normal',function(){
$(this).attr('src','nuevaFoto.jpg');
});
$('#nombreId').fadeIn('normal');
</pre>

El parámetro normal hace referencia a la velocidad del efecto. También se puede poner un valor numérico entre 0.1 y 1.
Por: marcosFernandez_blog

Perdón por lo de <pre> creía que funcionaría.
Por: marcosFernandez_blog

No deberías parar el "interval" en algun momento?
Por ejemplo cuando la opacidad llegue al 100%.

Esta divertido el efecto. Guiño

Aunque es cierto que usando algun framework javascript, como jQuery (o cualquier otro) se consigue con muy poco codigo. Creo que habría que apuntar que, si sólo vamos a usar este pequeño efecto, el tamaño de la librería completa podría comprometer el tiempo de carga de la página. Así que es mejor escribir nuestra propia función. miau

Por: ChickenExecutor_blog

el lo para... es un poco rara la linea por que no necesita el "else" ....

Código :

transparency = (transparency == 100) ? clearInterval(time) : transparency;

Por: bipsa

transparency = (transparency == 100) ? clearInterval(time) : transparency;

porque, si recuerdo bien es lo mismo que:

if(transparency == 100)
transparency = clearInterval(time)
else
transparency = transparency
Por: albertcito

pero tampoco se puede ver el ejemplo
Por: scoffil-blog

alguien puede ayudarme con un menu desplazable, pero con poco, codigo, ¡¡ digo si se puede verdad,, gracias ¡¡¡
Por: Scoffil-blog

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.