Divi y su módulo de galería de imágenes continúan siendo una herramienta conveniente y útil para crear impresionantes galerías de imágenes para su sitio. Las configuraciones de diseño incorporadas le permiten obtener todas las necesidades y más. Pero, en este tutorial, llevaremos el diseño de la galería de imágenes a un nuevo nivel con un asombroso efecto de animación único. Usando una combinación de las opciones de diseño integradas de Divi anime.js, esta asombrosa animación se asemeja a un tipo de efecto dominó que revela cada imagen dentro de la galería una tras otra con una animación de diseño suave. Esto será perfecto para aquellos de ustedes que buscan una presentación única de su galería para los visitantes y una transición impresionante al navegar por cada página de la galería.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Y aquí hay un codepen que demuestra el mismo concepto.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Cómo agregar una animación asombrosa a una galería de imágenes Divi
Parte 1: diseñar el diseño de la página de la galería
La sección
Para comenzar, abra la configuración de la sección existente y dele un degradado de fondo de la siguiente manera:
- Degradado de fondo Color izquierdo: #d915b5
- Degradado de fondo Color derecho: #000000
- Posición inicial: 50%
- Posición final: 25%
En la pestaña de diseño, actualice el relleno:
- Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
En la pestaña avanzada, actualice lo siguiente:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
La fila para el título de la página
Dentro de la sección, agregue una fila de una columna. Esto mantendrá el título de nuestra página.
Abra la configuración de la fila y actualice el relleno:
- Relleno: 15 px arriba, 15 px abajo
El módulo de texto del título
Para crear el título de la página, agregue un módulo de texto a la fila/columna.
Luego actualice el contenido del cuerpo con el siguiente encabezado H1:
|
01
|
<h1>Gallery</h1> |
En la configuración de diseño de texto, actualice lo siguiente:
- Fuente del título: Poppins
- Alineación del texto del encabezado: centro
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 100 px (escritorio), 80 px (tableta), 60 px (teléfono)
La fila para el módulo de la galería
En la misma sección, cree una nueva fila de una columna que contendrá el módulo de la galería.
Abre la configuración de la fila y dale un fondo negro:
- Color de fondo: #000000
En la configuración de diseño, actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 95%
- Altura mínima: 80vh
- Relleno: 0px arriba, 0px abajo
- Sombra de caja: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Posición horizontal de la sombra del cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 70px
- Color de sombra: #000000
Parte 2: Diseñando el Módulo de Galería
Finalmente, estamos listos para agregar y diseñar el módulo de galería. Para crear la galería, agregue un nuevo módulo de galería a la fila.
Las imagenes
En la pestaña de contenido de la configuración de la Galería, agregue las imágenes que desea usar para la galería. Para este ejemplo, vamos a agregar 65 imágenes (o al menos más de 25). Esto nos dará una buena cantidad de elementos de la galería para mostrar nuestro asombroso efecto de animación y paginación.
Una vez que las imágenes se carguen en la galería, actualice lo siguiente:
- Recuento de imágenes: 25
- Mostrar título y subtítulo: NO
- Mostrar paginación: SÍ
NOTA: Establecer el recuento de imágenes en «25» define el número de imágenes que se mostrarán por página al hacer clic en los enlaces de paginación. La asombrosa cuadrícula de animación que agregaremos con código personalizado se basa en la galería de imágenes que tiene 5 filas de 5 imágenes (25 imágenes) por página. Para obtener los mejores resultados, asegúrese de tener al menos 25 imágenes y el recuento de imágenes establecido en 25.
Diseño de Superposición y Paginación
En la pestaña de diseño, actualice el diseño de superposición:
- Color del icono superpuesto: #ffffff
- Color de fondo superpuesto: rgba(217,21,181,0.55)
- Icono superpuesto: icono más (ver captura de pantalla)
- Alineación de texto de paginación: Centro
- Tamaño del texto de paginación: 2em
- Altura de línea de paginación: 2em
- Relleno: 10px arriba, 10px abajo, 5px izquierda, 5px derecha
Estilo avanzado
A continuación, vamos a agregar algunos estilos avanzados al módulo de la galería. La razón principal para hacer esto es controlar la cantidad de imágenes que se muestran por fila en diferentes dispositivos.
Primero, agreguemos algo de CSS al elemento de la galería de la siguiente manera:
Elemento de la galería CSS (escritorio)
|
01
02
03
04
05
06
|
animation: fadeLeft 0s !important;background: #000000;padding: 10px;width: 20% !important;margin: 0 !important;clear: none !important; |
Elemento CSS de la galería (tableta)
|
01
02
03
04
05
06
|
animation: fadeLeft 0s !important;background: #000000;padding: 5px;width: 25% !important;margin: 0 !important;clear: none !important; |
Elemento CSS de la galería (teléfono)
|
01
02
03
04
05
06
|
animation: fadeLeft 0s !important;background: #000000;padding: 5px;width: 50% !important;margin: 0 !important;clear: none !important |
Observe que el ancho de cada elemento de la galería cambia en cada dispositivo. El ancho del 20% en el escritorio creará 5 imágenes por fila. El ancho del 25% en la tableta creará 4 imágenes por fila. Y el ancho del 50% en el teléfono creará 2 imágenes por fila.
A continuación, elimine el borde de paginación pero agregue el siguiente CSS al cuadro Paginación de la galería:
|
01
02
|
border-top: 0px !important;padding-top: 20px; |
Finalmente, agregue un color personalizado y un peso de fuente al enlace de paginación activo:
|
01
02
|
color: #d915b5 !important;font-weight: bold; |
Antes de guardarlo, asegúrese de agregar la siguiente Clase CSS al Módulo de Galería:
- Clase CSS: et-anime-gallery
Parte 3: agregar el asombroso efecto de animación a la galería con JQuery y Anime.js
Ahora que el diseño está completo, tenemos un diseño de galería de imágenes simple y profesional. Todo lo que tenemos que hacer es agregar el código necesario para crear la asombrosa animación de la galería de imágenes.
Para hacer esto, agregue un módulo de código debajo del módulo de galería.
el css
En el cuadro de contenido del código, pegue el siguiente CSS asegurándose de envolver el CSS en las etiquetas de estilo necesarias:
|
01
02
03
04
|
/*hide prev and next pagination links*/ .et-anime-gallery li.prev, .et-anime-gallery li.next { display:none !important; } |
La biblioteca Anime.js
Debajo de la etiqueta de estilo final, pegue el siguiente src con una etiqueta de secuencia de comandos para llamar a la biblioteca anime.js para que podamos usarla para nuestro JavaScript/Jquery debajo.
|
01
|
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" |
El guión debería verse así…
El JQuery
Debajo del script que está llamando a la biblioteca anime.js, pegue el siguiente JQuery y envuélvalo con las etiquetas de script necesarias.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
jQuery(function ($) { $(document).ready(function () { var fromCenter = "center"; var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item"; var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image"; var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a"); //animate gallery on page load animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter); //animate gallery when clicking pagination number link $($paginationLink).click(function (e) { var pageNum = $(e.target).attr("data-page"); var fromNum = pageNum*25-25; //replace 25 with image count for gallery module animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum); }); function animateGalleryFunction(targetItem, targetImage, stagFrom) { //animate gallery image anime({ targets: targetImage, opacity: [0, 1], rotateX: [0, 360], scale: [0.5, 1], direction: "normal", easing: "easeInOutSine", duration: 600, delay: anime.stagger( 200, { grid: [5, 5], from: stagFrom }, { start: "100" } ), }); //animate gallery item background anime({ targets: targetItem, background: ["#000", "#d915b5", "#000"], direction: "normal", easing: "easeInOutSine", duration: 600, delay: anime.stagger( 250, { grid: [5, 5], from: stagFrom }, { start: "100" } ), }); } });}); |
Resultado final
Actualización de la galería y el código
Hay algunos consejos que debe tener en cuenta siempre que desee realizar cambios en la galería y los efectos de animación para que se ajusten a su propio sitio. Primero, si desea cambiar el recuento de imágenes de la galería a algo distinto de 25, deberá actualizar el código para reflejar ese nuevo valor. Por ejemplo, si lo cambia a 20, también deberá cambiar los números en la siguiente variable:
|
01
|
var fromNum = pageNum*25-25; |
a esto…
|
01
|
var fromNum = pageNum*20-20; |
Es posible que también deba actualizar el valor de cuadrícula de la propiedad de retraso en ambas animaciones. Por ejemplo, si solo tiene 20 imágenes por página en el escritorio, solo tendrá 4 filas de 5. Por lo tanto, deberá cambiar el siguiente valor:
|
01
|
grid: [5, 5] |
a esto…
|
01
|
grid: [4, 5] |
Además, puede cambiar los valores de propiedad de la animación según sea necesario. Por ejemplo, si desea cambiar los colores de la animación de fondo del elemento de la galería, puede actualizar lo siguiente:
|
01
|
background: ["#000", "#d915b5", "#000"] |
a esto…
|
01
|
background: ["#000", "#ffffff", "#000"] |
Esto cambiará el color de fondo rosa a blanco durante la animación.
Pensamientos finales
Una vez que se completa todo el diseño con el constructor Divi, agregar una animación asombrosa a su galería de imágenes puede ser una excelente manera de llevar el diseño al siguiente nivel. La clave de la animación es aprovechar el poder de la biblioteca anime.js para orientar las imágenes y los fondos para realizar múltiples animaciones. Siéntase libre de obtener más información sobre el escalonamiento de la cuadrícula con Anime.js en su sitio web . Siéntete libre de ajustar las propiedades y los valores del código para agregar tu propio toque al diseño.
Espero escuchar de usted en los comentarios.
¡Salud!