Más de 20 demostraciones que muestran efectos avanzados de jQuery
Hace poco tiempo, Flash fue una de las principales tecnologías utilizadas por los diseñadores web para agregar interactividad a un sitio web.
Desde la introducción del iPad, con su falta de Flash Player, hay una aceleración en el mundo del desarrollo web para usar tecnologías alternativas a Flash, como jQuery, Ajax y otros.
Aunque Flash sigue siendo una herramienta muy poderosa y útil, que funciona muy bien en muchos casos, muchos de los efectos que los diseñadores web están acostumbrados a crear en Flash se pueden implementar fácilmente con jQuery.
Aquí hay 21 demos en línea que muestran el poder de jQuery para crear efectos avanzados e interactividad que pueden rivalizar con Flash.
1. ¡Voltear! Un plugin jQuery
Esta demostración imita la popular técnica de volteo de cartas que puede rotar un elemento 360 grados alrededor de su propio eje xo y.
2. jQuery Quicksand plugin
Este es un gran complemento para clasificar una matriz de elementos / iconos en una página con buenos efectos de fundido de entrada / salida gradual y animación.
3. ImageFlow
Este visor de imágenes es similar a la interfaz CoverFlow de Apple, que se ha vuelto tan familiar en sus diversos productos y aplicaciones.
4. Crear un mapa interactivo con jQuery en lugar de Flash
Esta demo une el poder de jQuery con Ajax para realmente crear una interfaz atractiva.
5. Consejos de deslizamiento con jQuery y CSS3
Al hacer clic en los símbolos "+", se obtiene información adicional con un efecto de animación suave y agradable.
6. Zoomer Gallery
En esta demostración, lo que parece ser un estático regular galería de imágenes se le da algo de interactividad extra mediante el uso de un efecto de zoom de varias capas al pasar el puntero sobre una imagen.
7. jQuery circula
Esta demostración muestra el efecto Flash utilizado de forma circular alrededor de una página, todo hecho usando jQuery.
8. Efecto de alejamiento de la foto
Esta demostración parece engañosamente simple, pero después de un examen más detallado, encontrará varias capas de la complejidad del efecto de alejamiento.
9. Cajas deslizantes y subtítulos con jQuery
Aquí podemos ver cómo se pueden crear transiciones potentes usando jQuery, una técnica que antes estaba reservada solo para desarrolladores de Flash.
10. Galería de cajas de luz CSS3
Este plugin parece escrito específicamente para redes sociales. Arrastrando y soltando una foto en la parte superior del "cuadro de compartir" se abrirá una ventana modal que puede ser la interfaz para llamar a una API a través de AJAX que puede permitir al usuario compartir una foto en Flickr, Twitter, Facebook y otros sitios.
11. Haciendo un efecto de Photoshoot con jQuery y CSS
Aunque esta demostración puede parecer a primera vista llamativa, podría ser una herramienta muy poderosa para trabajar con imágenes grandes cuando se combina con el almacenamiento local AJAX o HTML5.
12. Awesome Bubble Navigation
Aquí el desarrollador hace un buen uso de las transiciones de color y la animación para producir un menú muy atractivo e interactivo.
13. Hermosa navegación de la imagen de fondo
En esta demostración, cada acción del usuario desencadena varias transiciones que actúan para sumergir completamente al usuario en la interfaz.
14. AviaSlider
AviaSlider utiliza efectos de transición clásicos similares a los de Flash para mejorar lo que parecería ser una interfaz de control deslizante estándar.
15. Presentación de imágenes de fondo
Los fondos animados son una de las áreas donde Flash solía dominar el diseño web. Aquí hay un ejemplo usando jQuery en su lugar.
16. Panorámica de diapositivas
Otra toma única en la interfaz típica de presentación de diapositivas. Aquí el autor agrega navegación diagonal para darle más sabor a la interfaz y para que se destaque.
17. jqFancyTransitions
Este complemento se puede usar para mostrar sus fotos como una presentación de diapositivas con efectos de transición estilo Flash.
18. iCarousel - Control deslizante de imágenes horizontales
Otra presentación de diapositivas que agrega un toque de relajación para hacer que las transiciones realmente se destaquen. No es de extrañar que eligieran exhibir productos sexy de Mac en esta demostración.
19. Hacer una imagen interactiva con jQuery
Esta demostración se puede utilizar para aprovechar los sitios web donde hay mucho espacio en la pantalla. Al hacer clic en una sección del sitio web, se muestra un cuadro modal que muestra más información sobre la sección cliqueada.
20. Cloud Zoom
Un complemento que parece diseñado con el eCommerce en mente. Cloud Zoom es fácil de implementar y realmente puede mejorar la experiencia del usuario.
21. Efecto Retina similar a Apple
Cualquiera que haya usado un iPhone, iPod touch o iPad está familiarizado con la "Vista de retina" que ampliará un área pequeña en la pantalla cuando toque el área durante un período de tiempo prolongado. Esta demostración implementa este efecto para el escritorio.
Compilado exclusivamente para WDD por Flota de Kalim . Es un diseñador web y blogger profesional con más de 6 años de experiencia. La web es su pasión, ya que divide su tiempo entre redacción de blogs, desarrollo de software y redes sociales. Le encanta usar y desarrollar nuevas aplicaciones para la web, el móvil y el escritorio.
¿Conoces algún otro gran ejemplo de efectos jQuery que puedan competir con el poder de Flash? ¿Alguna vez sugirió jQuery effects over Flash cuando sus clientes los solicitan? Por favor comparte tus puntos de vista y ejemplos a continuación!