> TremulaJS: esta moderna galería de imágenes animadas te impresionará

Cuando se trata de pulir imágenes u otros datos visuales, hay muchas bibliotecas de JavaScript para convertir fácilmente una colección de imágenes sueltas en galerías funcionales y de diseño atractivo. Una opción muy popular es el carrusel de imágenes, donde las imágenes se intercambian mediante el movimiento del mouse o un gesto de deslizamiento. TremulaJS también proporciona un marco muy extenso que le permite crear galerías animadas y ajustar su apariencia de formas realmente únicas.

TremulaJS: visualización de imágenes como „Montaña“, „Tocadiscos“ o en Pinterest Look

El marco proporciona diferentes formas en las que puede mostrar sus imágenes. Por ejemplo, existe la vista «Montaña», donde las imágenes se organizan en forma circular. Sin embargo, solo se muestra una sección del círculo. Esto significa que las imágenes están dispuestas en forma de arco que simplemente se etiqueta como «Montaña». Otra forma de presentación es el formato «Placa giratoria». Aquí, las imágenes se pliegan desde la izquierda o la derecha. También es posible un arreglo clásico de varias columnas, como se conoce en Pinterest.

Representación „Montaña“

En total, hay seis formas diferentes de dar forma a tus imágenes. Las diferentes formas se presentan muy bien en un página de demostración.

Representación „Tocadiscos“

Además, hay una gran cantidad de otras configuraciones que se pueden usar para realizar más ajustes en su galería. De esta forma, puedes personalizar el tamaño de presentación de las imágenes, así como el número de líneas y columnas. El formato «Montaña» puede consistir en múltiples imágenes dispuestas debajo en lugar de solo una al lado de la otra. Le permite crear galerías de relleno de formato que responden.

Representación de Pinterest

Animaciones con un Impulso

Además de las diferentes formas de presentación, TremulaJS también sabe impresionar con sus efectos de animación. Mediante el movimiento del mouse o los gestos de deslizamiento, la galería se pone en movimiento. Dependiendo de la forma de representación, las imágenes giran en un círculo («Montaña»), se pliegan en la ventana gráfica («Placa giratoria») o solo se mueven horizontal o verticalmente.

En muchos casos, el movimiento o gesto del mouse se traduce exactamente cuando se trata de estas animaciones. TremulaJS, sin embargo, simula fuerzas de impulso físico para crear un movimiento de apariencia natural. Esto significa que cuando la galería se pone en movimiento con mucho impulso, comenzará a moverse a la misma velocidad y tomará la cantidad de tiempo correspondiente. Luego dejará de moverse lentamente.

La vista «Montaña» crea un efecto similar que se activa cuando la rueda comienza a girar. Debido a que la animación intenta parecerse a las fuerzas físicas, la navegación por la galería es muy intuitiva y las animaciones son muy agradables.

Carga imágenes infinitas gracias a JSON

Las imágenes individuales de una galería TremulaJS no se configuran individualmente en la fuente HTML, sino que el marco las carga a través de un objeto JSON. Solo se debe colocar un elemento „

“ en el cuerpo HTML. Esto sirve como marcador de posición para la galería.

Este enfoque le permite usar la API de Flickr para cargar imágenes a través de JSON y mostrarlas en una galería separada. Como las imágenes no están ancladas en la fuente, no es necesario cargar todas las imágenes de la galería a la vez. Es por eso que existe la opción de cargar imágenes de forma diferida. Así, las galerías con cientos de imágenes no suponen ningún problema.

En la demostración de TremulaJS, puede ver cuán fluido y limpio se muestra el movimiento incluso con muchas imágenes cargadas.

TremulaJS: estructura compleja de JavaScript y algunas dependencias

A diferencia de muchas otras bibliotecas de galerías, el uso de TremulaJS no se realiza simplemente agregando unas pocas líneas de JavaScript. Definitivamente requiere un poco más de esfuerzo.

Primero, se debe definir el elemento HTML en el que desea que se coloque la galería. Los muchos parámetros de configuración son manejados por un objeto literal.
Fuente viable en CodePen

La carga de las imágenes se realiza a través de funciones personalizadas que se programan individualmente. Es por eso que no presento ningún fragmento de código aquí. Sin embargo, hay una demostración relativamente comprensible en CódigoPen, que muestra la carga de imágenes de Flickr. Aquí, puede acostumbrarse al marco y probar un montón de cosas diferentes.

También puede descargar un ejemplo bien documentado de una representación HTML, CSS y JavaScript.

La complejidad de TremulaJS también se refleja en sus dependencias con otras bibliotecas. Requiere el marco jQueryy los complementos Martillo.JS y jsbezier. Si bien Hammer.js es responsable de la implementación de gestos de deslizamiento en dispositivos móviles, se necesita jsBezier para que la animación funcione en curvas como en el círculo de la vista «Montaña».

Conclusión

TremulaJS permite la creación de galerías de relleno de formato que son divertidas de usar debido a animaciones ordenadas y eficientes. Si bien ponerlo en funcionamiento requiere un poco de esfuerzo, ciertamente vale la pena si desea más que un carrusel de imágenes clásico o algo similar que todos ya tienen.

TremulaJS está a cargo de Garris Shipon y Art.com Labs. Se proporciona en Github bajo la licencia liberal MIT y se puede usar tanto para proyectos privados y comerciales como para trabajos de clientes.

(dpe)

#TremulaJS #esta #moderna #galería #imágenes #animadas #impresionará

TremulaJS: esta moderna galería de imágenes animadas te impresionará