jueves, 23 de abril de 2015

Transiciones, Sliders y Slideshows

transiciones, sliders y slideshows


Buenas, ahora en este tutorial para empezar, este incluye transición vamos a crear algo similar a un slider de imágenes .

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:



La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que queramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:



Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:



En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.



  1.  Y Listo! → ¿Te gusto? Síguenos en nuestras redes sociales. 
  2. Si tienes dudas, comenta todas serán respondidas.

¡Compártelo!


0 comments :

Blogger Template by Daniel Galindo
})();