Este tutorial muestra como jugando con la propiedad “background-position”, el tipo de input “range” y un poco de javascript, podemos crear efectos de giro 360º.
Partiendo del mismo concepto buscaremos dos resultados diferentes: por un lado visualizaremos una fotografía panorámica de 360º y por otro crearemos un efecto de giro alrededor de un producto.
Efecto panorámica 360º
Para este ejemplo necesitaremos contar con una fotografía de 360º similar a las que usa Google Maps en su Street View.
Seguramente no tendremos a nuestra disposición una cámara que tome este tipo de fotos, así que podemos seguir el manual para hacerlo con Photomerge de Photoshop. El resultado que ofrece Photomerge es bastante bueno si cuidamos la estabilidad y la iluminación durante la toma de fotos.
Una vez tengamos nuestra foto panorámica, creamos un documento HTML5 donde sólo incluiremos un div y un input del tipo ‘range’:
<div id="imagen360"></div> <input id='rango' type="range" max='100' min='0' value='0'>
Las etiquetas range son similares a un control slider y responde entre otras a las propiedades max, min y value:
- max es el valor máximo que puede tomar, cuando arrastramos el manejador al tope derecho.
- min es el valor mínimo que puede tomar, cuando arrastramos el manejador al tope izquierdo.
- value es el valor predefinido que posicionará el manejador a lo largo de la línea de control.
Hay que tener en cuenta que por ahora Firefox no da soporte a los inputs “range”, que las muestra como tipo “text”. Es curioso que IE10 sí las muestre. Se acerca el apocalipsis.
A la capa le aplicamos el fondo con la imagen panorámica. En mi caso he procurado que el alto del div coincida con el de la imagen. Aplicamos unos estilos básicos:
#imagen360{
background: url(./img/imagen360.jpg);
height: 300px;
width: 300px;
}
#rango{
width: 300px;
}
Ahora tendremos que relacionar los cambios de estado de nuestro range con la posición del fondo mediante javascript:
var anchoImagen = 4097 - 300;
var incremento = -1 * anchoImagen / 100;
//He usado jQuery por comodidad
$('#rango').on('change', function(e){
var posicionImagen = $(this).attr('value') * incremento + 'px 0';
$('#imagen360').css('background-position', posicionImagen);
});
La variable anchoImagen guarda el ancho del fondo quitándole los 300px del ancho del contenedor para que no se repita al llegar al final. incremento divide entre 100 para que corresponda con los pasos (min=’0′ max=’100′) del input.
La función que se dispara cuando hacemos ‘change’ (arrastramos el manejador) va cambiando el background-position del contenedor en función del valor del atributo value.
Efecto giro de 360º alrededor de un producto
Siguiendo la misma metodología, podemos usar range y background-position para crear la ilusión de estar rotando un artículo, por ejemplo, de una tienda online.
En este caso la imagen debería estar compuesta de varias fotos del producto tomadas desde distintos ángulos a modo de secuencia de fotogramas.
El código no sería muy diferente:
#imagengira{
background: url(./img/imagengiratoria.jpg);
height: 207px;
width: 350px;
}
#giro{
width: 350px;
}
<div id="imagengira"></div> <input id='giro' type="range" max='18' min='0' value='0'>
var anchoframe = 350;
$('#giro').on('change', function(e){
var rotacionImagen = -1 * $(this).attr('value') * anchoframe + 'px 0';
$('#imagengira').css('background-position', rotacionImagen);
});
En este caso sólo le damos 18 pasos a nuestro range (min=’0′ y max=’18′) que se corresponden con los 18 fotogramas que tiene y le disminuimos el ancho del frame (350) en cada uno.
.
.
.