Problemente, el que mas o el que menos, ya ha escuchado hablar alguna vez del nuevo elemento que implementa HTML 5, canvas, que nos permite crear un lienzo donde poder crear y modificar gráficos.
Aprovechando este nuevo elemento, crearemos una presentación de imágenes, al que le aplicaremos un efecto de transición y que será funcional tanto en los nuevos como en los viejos navegadores.
Con JavaScript, vamos a aplicar un filtro especial para cada imagen en la presentación. Vamos a crear una nueva versión de las imágenes, con mayor contraste y colores más vivos, y almacenarlo en un canvas.
Cuando el usuario seleccione otra imagen, se le aplicará un efecto de iluminación suave.
Nuestro primer paso es crear el código HTML con la lista de imágenes y los controles de desplazamientos entre las distintas fotos.
El código es el siguiente.
[color=#000000]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="slideshow">
<ul class="slides">
<li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li>
<li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li>
<li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
<li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
[/color]
En primer lugar tenemos el tipo de documento HTML 5, seguida por la sección de encabezado del documento.Después de la etiqueta del título y la hoja de estilo que utilizaremos.
Como podemos ver, el código es simple. El contenedor principal #slideshow contiene una lista desordenada y los controles para desplazarse por las diferentes imágenes. Cada elemento de la lista desordenada tiene la clase .slides. En estos elemento será donde el elemento canvas aparecerá con las modificaciones de las imágenes.
A continuación vamos a ver la hoja de estilos.
[color=#000000]
#slideshow{
background-color:#F5F5F5;
border:1px solid #FFFFFF;
height:340px;
margin:150px auto 0;
position:relative;
width:640px;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;
box-shadow:0 0 22px #111;
}
#slideshow ul{
height:320px;
left:10px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:10px;
width:620px;
}
#slideshow li{
position:absolute;
display:none;
z-index:10;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
#slideshow .slideActive{
z-index:1000;
}
#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}
#slideshow .arrow{
height:86px;
width:60px;
position:absolute;
background:url('img/arrows.png') no-repeat;
top:50%;
margin-top:-43px;
cursor:pointer;
z-index:5000;
}
#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}
#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}
[/color]
Podemos dividir a nuestros visitantes en tres tipos distintos:
Gente con JavaScript desactivado. Estos solo verán la primera diapositiva y no podrán desplazarse por el resto.
Gente con JavaScript activado pero que no soporta canvas. Para estos usuarios, las imágenes cambiarán de forma instantánea sin ningún tipo de efectos.
Gente con JavaScript activado y soporte para canvas. Estos serán los que verán el funcionamiento al completo del slideshow.
Ahora veremos el código JavaScript que le proporcionará la funcionalidad a al aplicación
La primera parte del código es el siguiente.
[color=#000000]
$(window).load(function(){
// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.
// Testing wether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.
var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){
// Saving the dimensions of the first image:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Rendering the modified versions of the images:
createCanvasOverlay(this);
});
}
$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one:
next.show();
current = nextIndex;
// Fade the current slide out of view:
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
// This browser does not support canvas.
// Use the plain version of the slideshow.
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);
[/color]
Con “document.createElement()” nosotros podemos crear el elemento que necesitemos de forma dinámica, en nuestro caso crearemos un elemento “canvas”. Nosotros testeamos que el navegador soporte este tipo de elementos, si no lo soporta, entonces creamos un elemento genérico.
Utilizamos el operador “in” para chequear mediante el método “getContext()” que soporta el elemento “canvas”. El resultado del chequeo es utilizado a través del código para detectar que navegadores harán una cosa y cuales otras.
Observar que la llamada a la función “createCanvasOverlay” está encerrada en una declaración “setTimeout”. Esto está hecho así porque la función podría llegar a bloquear la ventana del navegador. SetTimeout sale de la ruta de ejecución y ejecuta el código de forma asincrónica, maximizando la capacidad de respuesta de la página.
La segunda parte del código javascript es el siguiente.
[color=#000000]
// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
// Make it the same size as the image
canvas.width = slideshow.width;
canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas:
canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array:
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
for(var i = 0,z=data.length;i
[/color]
En el código anterior es donde está todo el código que crea el efecto. El elemento canvas no es mas que un lienzo donde poder dibujar con JavaScript. El código anterior crear un elemento canvas e importa ahí la imagen que ha sido pasada por parámetro con el método “drawImage()”. Después de esto, nosotros podemos utilizar el método “getImageData()” para exportar el contenido de todo los píxels del canvas al array “imageData”.
En la función, recorremos con un bucle todos los píxels de la imagen, oscureciendo los colores más oscuros, y aclarando los más claros. Para cad pixel se modificaran cuatro parámetros: color rojo, azul y verde, y el cuarto parámetro que corresponde al canal alpha (transparencia).
Para hacernos una idea, un bucle que recorra una imagen de 600 x 400 píxeles, hará 240000 iteraciones, por lo que nuestro código debe de estar lo más optimizado posible para evitar que tarde mucho.
Pueden ver un ejemplo
aquí.
Si no quieren ir a la página oficial descarguense la Demo in salir de T!
Si no quieren ir a la página oficial descarguense la Demo in salir de T!
