Threesixty es un plugin diseñado con jQuery para la creación de elementos que giran 360 grados mediante el arrastre del ratón.
Como muchos recordaran, este tipo de elementos anteriormente se creaban utilizando tecnologías como Flash. Ahora, y gracias a la potencia de jQuery, se puede hacer exactamente lo mismo si depender del programa de Adobe.
La idea es la siguiente, crear una animación de un elemento utilizando para ello una secuencia de imágenes, las mismas se insertan en una única carpeta siguiendo un patrón numérico, de esta forma la imagen ira rotando (pasando a la siguiente o anterior) de forma automática y sin que el usuario perciba el cambio en ningún momento. Este es un simple pero efectivo método para generar elementos que giran 360 grados.
Ejemplo de elemento a 360º con jQuery:
HTML:
<div data-path="img/gem{index}.JPG" data-count="50"></div>
JavaScript:
$(document).ready(function(){
$('.threesixty').threeSixty({
dragDirection: 'horizontal'
});
});
El ejemplo se explica prácticamente solo. Por un lado en el HTML debemos indicar la ruta a la carpeta de imágenes y la cantidad que componen el set completo (data-count). Y finalmente inicializar el plugin.
Web: Threesixty