¿Quieres crear un efecto realmente único y llamativo para tu sitio? ¿Qué tal una animación que hace zoom en una parte específica de la página cuando haces clic en ella?
Puede parecer mucho trabajo, pero con jQuery y Zoomooz.js, ¡es muy fácil! Lo guiaré paso a paso a través del proceso a medida que construimos una impresionante galería de miniaturas con zoom.
Lo que estamos construyendo
Demo en vivo: Haga clic aquí
Zoomooz.js: Introducción Básica
Cuando trabaje con nuevas bibliotecas, siempre es mejor comenzar con un ejemplo simple, solo para que pueda tener una idea de cómo funciona todo. Con este proyecto construiremos una página básica para probar la funcionalidad de zoom del script, luego pasaremos a un ejemplo más práctico creando una galería completa en miniatura.
HTML: Las Inclusiones
Este proyecto tiene un montón de cosas para incluir en la parte principal de su HTML. Lo primero que debes hacer es dirigirte a la página de inicio de Zoomooz.js y descargar la biblioteca. Verás que realmente contiene no una, sino varias bibliotecas de JavaScript. Afortunadamente, en la descarga encontrará instrucciones para ejecutar un script para combinar y minimizar todo, por lo que no es tan grande y desordenado (le dejo este paso).
Con eso en mente, nuestro pequeño experimento requerirá el siguiente código para comenzar:
El JavaScript
A continuación, copie y pegue el script siguiente en su HTML. Como puedes ver, ¿qué hace es apuntar a la clase? ¿Zoom? y aplica el? zoomTo? Método de la biblioteca. Luego, aplicamos lo mismo al cuerpo, lo que le permite al usuario hacer clic fuera de cualquier elemento para volver al nivel normal.
No te preocupes demasiado si no entiendes esto. Solo tenga en cuenta que tendremos que aplicar el? Zoom? Clase a elementos que queremos que sean ampliables. Este mismo fragmento de código exacto se aplicará en los dos proyectos de hoy, así que siéntase libre de copiarlo.
El HTML
A continuación, queremos establecer un campo de prueba básico. Para hacer esto, necesitamos crear un contenedor, un div exterior y un div interno. El contenedor puede parecer arbitrario, pero al incluirlo y establecer un ancho / alto, ayuda a que el efecto de zoom funcione correctamente en el elemento más externo.
Observe también que hemos aplicado el? Zoom? Clase a los divs externos e internos. El enlace en este punto es realmente un elemento ficticio para ayudar a guiar al usuario. El guión funciona perfectamente bien sin él.
El CSS
A continuación, aplicamos medidas y posicionamiento a cada elemento. De nuevo, un tamaño de contenedor definido hace que la función de zoom funcione correctamente, al igual que la posición? Absoluta: ¿absoluta? declaración sobre el? interior? div. El script puede ser un poco peculiar, así que asegúrate de obtener estos elementos correctamente.
Texto CSS
Finalmente, aquí solo agregamos un estilo de texto básico para el párrafo junto con un estado de desplazamiento. Una vez más, siéntase libre de abandonar el enlace por completo.
Manifestación
Con eso, nuestra simple demo está todo terminado. Abre la página de demostración para verla en acción. Tenga en cuenta que hacer clic en cada div le da un nivel de zoom diferente y hacer clic en el cuerpo lo aleja completamente.
Zoomooz.js: Galería de miniaturas
Usando esta misma técnica, podemos construir una impresionante galería de miniaturas con un efecto de zoom. Sin embargo, es importante tener en cuenta que este complemento probablemente funcione mejor para los elementos representados con el navegador. Cuando lo usamos para imágenes, como lo haremos a continuación, la desafortunada realidad es que tienes que cargar todo en su tamaño ampliado.
Entonces, a pesar de tener una página llena de miniaturas pequeñas, en realidad cargamos una página llena de imágenes grandes, lo que puede demorar varios segundos dependiendo de la velocidad de conexión del usuario.
A pesar de esta limitación, todavía es divertido llevar las cosas al límite y ver qué es posible.
HTML
El HTML para este proyecto será realmente simple. Empiezo con un div que contiene texto descriptivo, básicamente solo un encabezado rápido y una etiqueta de párrafo para explicar lo que está pasando. A continuación, creé una gran lista desordenada que contenía las imágenes. ¡Eso es practicamente todo!
Tenga en cuenta que he aplicado el? Zoom? clase tanto a la? galería? div en su conjunto y para cada imagen dentro de la div. Esto nos dará dos niveles de zoom para jugar. La biblioteca es lo suficientemente inteligente como para manejar automáticamente los niveles de zoom relativos basados en las relaciones padre / hijo.
Además, asegúrate de tomar el código principal y JavaScript del ejemplo anterior. Estoy usando la misma configuración exacta, solo mi cuerpo HTML y CSS cambiarán.
Una vez que haya terminado de diseñar el contenedor de la galería, es hora de hacer que nuestra gran lista de imágenes se ajuste a una cuadrícula. Para hacer esto, declare? Ninguno? como el tipo de estilo de lista y flotan los elementos? li 'que quedan. Observe también el contexto de posicionamiento y el efecto de desplazamiento. Para el último de estos, bajé los márgenes al pasar el cursor para que el borde no afectara el diseño. Entonces, para comenzar, cada miniatura tiene un margen de 10px, luego, al pasar, una miniatura tiene un margen de 7px y un borde de 3px (7 + 3 = 10).
Con eso, todos hemos terminado! Haga clic en la imagen de abajo para iniciar la demostración.
Conclusión
Hoy utilizamos HTML, CSS y JavaScript de forma sinérgica para crear una galería web loca que hace zoom en una miniatura cuando haces clic. Como mostramos en la demostración de prueba, ¡este mismo efecto puede funcionar en cualquier elemento que desee!
Apenas hemos arañado la superficie de lo que puede hacer Zoomooz.js. Pase por la página del proyecto para ver cómo hacer aún más con este increíble complemento.