Existen algunas soluciones atractivas basadas en Flash de Adobe para componentes de éste tipo de interfaz de usuario, y mientras que las versiones de JavaScript existan (ejemplo 1, ejemplo 2). Los productos Flash comerciales tienden a tener una mejor estética y pulimento. A continuación un ejemplo a favor de JavaScript creado con un plugin jQuery carrusel.

Nueva versión 1.0.5 funciona con IE9 (Ahora utilizan Canvas y es mucho más rápido).

Carrusel 3D en Javascript

(Carrusel 1)

El carrusel por encima de las características opcionales de auto-reflexiones, y la información contenida en las etiquetas alt y title de las imágenes, opcionalmente se pueden mostrar cómo se depura sobre cada imagen.
Hay algunas ventajas a hacer este tipo de cosas en JavaScript en lugar de Flash, ya que la facilidad de integración, tamaño de archivo pequeño, SEO, y degradabilidad intrínseca / accesibilidad son mucho mejores. Al no tener otra herramienta de desarrollo en el flujo de trabajo es un punto más a favor.

El carrusel cuenta con perspectiva realista. Muchos carruseles 3D sólo se aplican perspectiva escalada con el tamaño de las imágenes, y no utilizando sus posiciones. Esto se traduce en diferencias desproporcionadas entre los elementos que aparecen, puesto que se contraen en la distancia y esto parece extraño.

Características

  • El carrusel funciona con la mayoría de los navegadores (probado en IE6IE9, Firefox (IVA V4), Chrome, Opera, Safari).
  • Perspectiva 3D precisa.
  • Reflexiones automática opcional – sin necesidad de modificar las imágenes o añadir el código de servidor.
  • Fácil integración con HTML base en vigor y un poco de JavaScript.
  • Degradados con gracia utilizando JavaScript desactivado.
  • Totalmente accesible sin CSS o navegadores de sólo texto.
  • Funciona con otros plugins, por ejemplo, Slimbox, y conserva sus enlaces y eventos de ratón.
  • Opcional soporte de la rueda del ratón en la versión 1.0.2.
  • Es completamente gratuito.

(Carrusel 2)

El carrusel de arriba usa la opción de auto-rotación y la opción de avanzar hacia delante. Utiliza reflexiones  “cheat” que son sólo una parte de la imagen. Esto puede mejorar el rendimiento si se tienen muchos elementos.

Los sitios que utilizan la nube Carrusel

Puedes ver un ejemplo funcionando aqui: www.professorcloud.com/mainsite/carousel.htm

Enviado por @sosj_jorge

Cecy Martínez

Cecy Martínez

Jefa de contenido y editora en HTML5Fácil, NinjaCodeTV, Desveloperstv y Co funder de WaveCode.LA

2 comentarios en “Carrusel 3D en Javascript

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar