El propósito de una miniatura es presentar al usuario más información
Las miniaturas (o thumbnails) son una de las mejores piezas de usabilidad que ha creado la era digital. En esencia, la miniatura es una vista previa, una promesa de lo que vamos a ver si se hace clic en el enlace. Una pequeña muestra con menos datos, más rápida para cargar y menos ávida de espacio en pantalla que el archivo de tamaño completo. Son ideales para las imágenes, pero ¿qué hay del video?
Pues bien, mediante la extensión de una técnica podemos crear asombrosas miniaturas animadas con CSS básico y un poco de jQuery.
Cómo trabaja CSS sprites
Hoy en día, las velocidades de descarga no son un problema para los desarrolladores web. Por supuesto, los pequeños tamaños de archivo todavía son deseables, pero el rendimiento real de una página en la mayoría de los sitios es el número de peticiones HTTP. Cada vez que un sitio carga un archivo, el navegador hace una petición HTTP que se envía, procesa "‹"‹y luego se devuelve. Revisando nuestra consola veremos que gran parte de la demora de un sitio tiene que ver con el tamaño de la imagen pasando la espera de una respuesta del servidor.
La solución es la técnica de CSS sprites; juntando varias imágenes en un solo archivo de imagen y, a continuación, mostrar selectivamente diferentes partes de la imagen usando CSS.
Tradicionalmente, para cualquier botón que no podamos crear con estilos CSS básicos, nos gustaría crear tres estados, uno arriba (on), uno encima (over) y otro abajo (down):
.button{
background:url('off-state.png');
}
.button:hover{
background:url('over-state.png');
}
.button:active{
background: url('/down-state.png');
}
Esto conduciría a que se descarguen tres imágenes desde el servidor y generaría tres solicitudes HTTP.
Construyendo esto como un sprite CSS, ahorramos las tres imágenes del lado del servidor en un solo archivo (de modo que en lugar de tener tres imágenes amplias de 200px, tenemos una imagen de un ancho de 600px) y cambiamos la posición de la imagen usando la propiedad de CSS background-position:
.button{
display:block;
width:200px;
height:83px;
background: url('/button-states.jpg');
}
.button:hover{
background-position:-200px;
}
.button:active{
background-position:-400px;
}
Piensa en el elemento como una ventana que permite ver la imagen. Podemos mover la imagen alrededor, pero la ventana se queda en la misma posición. Siempre que se asegure de que el elemento es del mismo tamaño que la porción de la imagen que desea mostrar el efecto es imperceptible. Una demostración de esto aquí.
La construcción de una miniatura animada
La limitación de la técnica de sprites CSS anterior no es la imagen, es el número de diferentes factores desencadenantes que podemos usar. Sólo tenemos off (estado por defecto), over y down.
Sin embargo, mediante la conexión con un poco de jQuery podemos usar la posición del cursor para determinar muchos puntos de disparo diferentes - o más exactamente, muchas posiciones diferentes de cursor que podemos tener en la pantalla.
Aquí una demostración de lo que vamos a construir.
Lo primero que tenemos que hacer es unir algunas imágenes. Voy a realizar un enlace a este hermoso video de la salida del sol en el oeste de Noruega por Fuglefjellet, así que he cogido 10 fotogramas clave de la pantalla de una sección de ese video que me gusta y juntado en una sola imagen con Photoshop.
Ahora que la imagen está lista, la segunda cosa que tenemos que hacer es crear un simple archivo HTML con un enlace al video del que estamos creando la miniatura:
<a href="http://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
A continuación, tenemos que importar jQuery en la cabecera de la página:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Luego usamos jQuery para fijar el tipo de presentación (block) el ancho (500px para que coincida con el ancho de un "marco" de nuestra imagen) la altura (203px) y el fondo (background ) de nuestro enlace:
$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("our-image.jpg") no-repeat');
});
Por último, tenemos que establecer el fondo para que se muestre la porción correcta de nuestra imagen, cada 'frame' tiene 500px de ancho, por lo que para mostrar el primer fotograma de la posición x de la imagen de fondo debe ser 0px, para mostrar la segunda tendrá que ser -500px, la tercera será -1000px y así sucesivamente.
Utilizando la función de controlador mousemove, se puede calcular la posición relativa del cursor sobre el elemento en forma de porcentaje; restamos posición de desplazamiento del elemento del evento pageX (esto trata el borde izquierdo del elemento como 0), entonces se divide por la anchura del elemento.
Una vez hecho esto se calcula la posición de la imagen de fondo multiplicando la posición del porcentaje por el tamaño total de la imagen compuesta. Necesitamos que el resultado final sea múltiplo de la anchura del elemento (500px) por lo que se divide el resultado por ese valor, redondeando hacia abajo usando Math.floor() y después multiplicando de nuevo para cancelar la división, si no hacemos esto la imagen simplemente se desplazará 1px a la vez.
Restamos el valor resultante de 0 para que todos los valores posibles sean negativos.
A continuación, se aplica el background-position con CSS:
.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', '-' + bgPosition + 'px 0px');
});
El script completo es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("landscape.jpg") no-repeat')
.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', bgPosition + 'px 0px');
});
});
</script>
</head>
<body>
<a href="http://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
</body>
</html>
Conclusión
Hay un par de cosas a considerar: en primer lugar, sería posible establecer una miniatura con cientos de 'frames', pero al mismo tiempo daría lugar a la animación muy tranquila, también tomará mucho tiempo para cargar; en segundo lugar, la detección de la posición del ratón simplemente no va a funcionar en un dispositivo de pantalla táctil, así esta técnica no dañará realmente la usabilidad en un dispositivo móvil.
El propósito de una miniatura es presentar al usuario más información acerca de lo que hay en el otro extremo del enlace, y cuando el recurso se va a asociar a un video, una sola imagen a menudo no es suficiente información. La técnica de CSS sprites es una manera simple y efectiva para obtener una vista previa de más de un solo cuadro.