Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Slideshow sencillo con CSS3 y JavaScript

Aprovechando las capacidades de CSS3 y un poco de JavaScript, he decidido crear dos slideshow bastante sencillos, teniendo en cuenta los que podemos ver en algunas páginas últimamente.

Imagen del slideshow

Podéis ver las demos del slideshow con efecto opacidad y el slideshow con efecto persiana.

Para este ejemplo no se ha usado ninguna librería de JavaScript, lo que se consigue que este sea lo más liviano posible en cuanto a peso se refiere. Al ser un ejemplo bastante sencillo no he visto conveniente usar alguna, ya que el script solamente se encargará de modificar los class de una lista de imágenes, y el peso de la animación recae sobre el CSS y las nuevas propiedades que proporciona su última actualización.

Ejemplo slideshow efecto opacidad

HTML

Para ello vamos a ver el código HTML.

<ul id="galeria">
<li><img src="/blog/../img/rascafria-1.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-2.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-3.jpg" border="0" alt="Rascafría" /></li>
</ul>
CSS

Como hemos visto el código HTML es bastante sencillo tal como había comentado anteriormente. Ahora vamos a ver el código CSS que se ha añadido para esta ejemplo.

/** galeria **/
#galeria{display: block; margin: 0 0 0 15em; padding: 0; position: relative; width: 50%;height: 22.5em; list-style: none; border: 10px solid #1a1a1a; border-radius: 10px; box-shadow: 0 0 10px #000; overflow: hidden;}
#galeria li{position: absolute; top: 0; left: 0; width: 100%;border-radius: 10px;background-color:#1a1a1a;paddiing: .4em;}
#galeria li img{width: 100%;border-radius: 10px;background: #1a1a1a;}
#galeria .selected{z-index: 1; opacity: 1; -moz-transition: all 2s ease 0s;-ms-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-webkit-transition: all 2s ease 0s;transition: all 2s ease 0s;}
#galeria .noselected{z-index: 0; opacity: 0; -moz-transition: all 2s ease 0s;-ms-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-webkit-transition: all 2s ease 0s;transition: all 2s ease 0s;}

En este caso aprovechando la propieadad transition, z-index y opacity conseguimos la fusión de las imágenes tal como vemos en el ejemplo.

Los parámetros usados en la propiedad transition son:

  1. all: Referente que la transición se realiza sobre todos los atributos de esa clase
  2. 2s: El tiempo que dura la transición, en este caso son 2 segundos (s)
  3. ease: El tipo de transición realizada (existen otros tipos como ease-in, ease-out,...)
  4. 0s: El tiempo de delay (retardo) que tendrá la transición antes de ejecutarse

Comprobamos que las propiedades que diferencia a la clase ".selected" y ".noselected" es z-index y opacity. Son estas dos propiedades las que aprovecharan el efecto de la propiedad transition.

JavaScript

Ahora con la ayuda de la función setInterval de JavaScript proporcionamos un tiempo determinado para modificar el class de los elementos de la lista. Con la función slide_show y accediendo mediante el DOM a la lista, realizamos un intercambio de class a los elementos de la lista. Veamos el código.

/** javascript slide-show **/
var cons = 1;
function slide_show(){
var elemento = document.getElementById('galeria').getElementsByTagName('li');	
for(var n=cons; n <= elemento.length; n++){		
 elemento[n].className = 'selected';
 for(var i = 0; i<elemento.length; i++){
  if(i!=cons){
   elemento[i].className = 'noselected';
  }		
 }
  cons++;							
  break;
 }	
 if(cons >= elemento.length){
  cons = 0;		
 }
 return false;
}
window.onload = function(){
 setInterval(slide_show, 5000);
}

NOTA: Al formatear el código JavaScript puede que no se vea correctamente. Ver el archivo completo.

Los pasos más importantes del script serían:

  1. Declaramos una variable global con valor a 1. Con esto se pretende que el segundo elemento de la lista sea el primero en modificar su class la primera vez que se ejecuta el script. Para el que lo desconozca, el primer elemento de la lista tiene asignada la posición 0 y por esto inicializar esta variable a 1.
  2. En la variable elemento guardamos los elementos de la lista (como un array), y con los bucles recorremos los elementos para modificar el class del siguietne elemento con propiedad className de JavaScript.
  3. Por último comprobamos que la constante no sea superior al número de elementos de la lista. De ser cierta la comprobación volvemos a la posición 0.

Por otro lado podemos ver que la función setInterval no entraña demasiada complicación. Con el primer parámetro llamamos a la función slide_show y el segundo parámetro es el tiempo que se ha determinado en milisegundos. Así, cada 5 segundos se llamará a la función.

Ejemplo slideshow efecto persiana

Para este ejemplo se ha usado el mismo código HTML y JavaScript que en el caso anterior, así reitero que la responsabilidad del efecto creado recae sobre el CSS que se ha usado, que en este caso es evidente que tiene algunas diferencias. Por lo tanto en este ejemplo solo vamos a comentar el CSS empleado.

CSS
/** galeria **/
#galeria{display: block; margin: 0 0 0 15em; padding: 0; position: relative; width: 50%;height: 22.5em; list-style: none; border: 10px solid #1a1a1a; border-radius: 10px; box-shadow: 0 0 10px #000; overflow: hidden;margin-top: 1em;}
#galeria li{position: absolute; top: 0; left: 0; width: 100%;overflow:hidden;}
#galeria li img{width: 100%;}
#galeria .selected{height: 22.5em; z-index: 1; -moz-transition: all 1s ease 0s;-webkit-transition: all 1s ease 0s;-o-transition: all 1s ease 0s;-ms-transition: all 1s ease 0s;transition: all 1s ease 0s;}
#galeria .noselected{height: 0; z-index: auto; -moz-transition: all 0s ease 1s;-webkit-transition: all 0s ease 1s;-o-transition: all 0s ease 1s;-ms-transition: all 0s ease 1s;transition: all 0s ease 1s;}

Para el efecto persiana he usado las propiedades overflow: hidden y height con dos valores diferentes para cada class (.selected y .noselected).

La combinación de estas dos propiedades produce el efecto del ejemplo. El resto de propiedades usadas son idénticas a las empleadas en el caso anterior.

Conclusión

Estos efectos no son nada innovadores, podemos encontrar ejemplos mucho más avanzados por la red, pero pone de manifiesto (de nuevo) las posibilidades que ofrece CSS3 unido a unas pocas lineas de JavaScript, sin usar librerías que penalicen el tamaño de la página.

Referente al JavaScript empleado es bastante sencillo, pero seguramente y empleando algo más de tiempo se podría conseguir un script mucho más eficiente que el empleado en este ejemplo. Así les invito a crear uno y comentarlo.

Por último comentar que se han utilizado las capacidades de CSS3. Es evidente que este slideshow hay que visualizarlo en navegadores modernos que acepten estas propiedades (Firefox, Chrome, Safari, Opera...). Aunque he incluido el prefijo "-ms" (para IE9 y superior) en el CSS, no puedo comprobar si realmente degrada correctamente, por lo que les invito a que comenten si produce el efecto deseado como en el resto.

Actualización

A raíz de los comentarios de Anais os dejo un enlace a una nueva demo con este sencillo slide-show, pero en esta ocasión usando navegación por botones:

Slide-show 3 con botones de navegación.

Os dejo también el enlace al fichero javascript para que podáis bichearlo. Respecto al CSS, te valdrá con cualquiera de los usados anteriormente.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar