La galería de imágenes Divi es un módulo útil para crear galerías completamente funcionales dentro de un sitio web. Si eres un entusiasta de la moda o un fotógrafo, es posible que necesites una galería en tu sitio web para mostrar tus proyectos. Es posible que no sepa si Divi tiene todo el equipo incorporado necesario para brindar un efecto de animación excepcional en la galería de imágenes. Hoy intentaremos traer una animación de rizado usando anime.js con Divi Builder y veremos una animación de galería de imágenes creativa. Sin perder más tiempo, comencemos.
Avance
Así es como se verá nuestra galería después de haber realizado el tutorial completo.
Agregar animación a una galería de imágenes Divi
Parte 1: Diseño de diseño de página de galería
La sección
Primero, abriremos la configuración de la sección inicial y realizaremos la modificación mencionada.
- Gradiente de fondo Color a la izquierda: # 15d6c2
- Gradiente de fondo Color derecho: # 000000
- Posición inicial: 50%
- Posición final: 25%
Actualizaremos la configuración de relleno en la pestaña de diseño.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora- Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
Luego, actualizaremos la configuración de desbordamiento de la visibilidad en la pestaña avanzada.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Fila 1 Sumando
Agregaremos una fila de una columna que contendrá el título de nuestra página.
Luego, desde la configuración de la fila, actualicemos el relleno:
- Relleno: 15px superior, 15px inferior
Agregar módulo de texto
El siguiente paso es agregar un módulo de texto a la fila. Este módulo actuará como título de la página.
Ahora agregue el contenido de su elección y seleccione Título 1 en el menú que se muestra en la imagen.
Luego pasaremos a la sección de diseño y actualizaremos la siguiente configuración para el Encabezado:
- Fuente de encabezado: Poppins
- Alineación del texto del encabezado: centro
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 100 px (escritorio), 80 px (tableta), 60 px (teléfono)
Fila 2 Sumando
Agregaremos otra fila a la misma sección. Funcionará como nuestro módulo de galería.
Desde la configuración de la fila, agregue un color de fondo negro a la fila.
- Color de fondo: # 000000
Tenemos que hacer muchas actualizaciones en la pestaña de diseño. así que síguelo con cuidado. Primero, vaya a la configuración de tamaño.
- Usar ancho de canalón personalizado: SÍ
- Ancho de la canaleta: 1
- Ancho: 95%
- Altura mínima: 80vh
Ahora, agregue algo de relleno a la fila.
- Relleno: 0px arriba, 0px abajo
Es hora de agregar un poco de sombra de caja.
- Box Shadow: 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 de caja: 70px
- Color de sombra: # 000000
Parte 2: Diseño del módulo de galería
Es hora de agregar el módulo de galería a nuestro diseño.
Desde la pestaña de contenido del módulo de la galería. Agrega un mínimo de 25 imágenes. Esta es una cantidad bastante buena para que las imágenes tengan un efecto de animación excepcional.
Después de cargar las imágenes, realice los siguientes cambios:
- Recuento de imágenes: 25
- Mostrar título y pie de foto: NO
- Mostrar paginación: SÍ
Diseño de superposición y paginación
Actualice la configuración de superposición desde la pestaña de diseño:
- Color del icono de superposición: #ffffff
- Color de fondo de superposición: rgba (22,215,195,0.55)
- Icono de superposición: icono más (ver captura de pantalla)
Es hora de configurar la paginación.
- Alineación del texto de paginación: centro
- Tamaño del texto de paginación: 2em
- Altura de la línea de paginación: 2em
- Relleno: 10 px arriba, 10 px abajo, 5 px a la izquierda, 5 px a la derecha
Estilo avanzado
Ahora haremos una estilización avanzada para la galería. Primero, agreguemos algo de CSS al elemento de la galería de la siguiente manera:
Elemento de galería CSS (escritorio)
animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;
Elemento de galería CSS (tableta)
animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;
Elemento de galería CSS (móvil)
animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important
Agregue el siguiente código CSS al cuadro de paginación de la galería.
border-top: 0px !important;
padding-top: 20px; Además, coloque este código CSS en el cuadro de página activa de paginación.
color: #15D6C2 !important;
font-weight: bold;
Ahora agregue una clase CSS al módulo de la galería antes de guardarlo.
- Clase CSS: et-anime-gallery
Parte 3: Agregar el efecto de animación con JQuery y Anime.js
Hemos terminado con nuestro diseño. Es hora de agregar una codificación simple para hacerlo más atractivo. Es por eso que agregaremos un módulo de código debajo del módulo de galería.
El CSS
Ahora pegue el siguiente código CSS dentro del cuadro de contenido dentro de las etiquetas de estilo .
/*hide prev and next pagination links*/
.et-anime-gallery li.prev, .et-anime-gallery li.next {
display:none !important;
} 
La biblioteca Anime.js
Debajo del código CSS, agregue esta fuente en las etiquetas Script para agregar la biblioteca Anime.js a nuestro diseño.
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
Código jQuery
Ahora agregaremos el código jQuery dentro de las etiquetas del script .
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,
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", "#15D6C2", "#000"],
direction: "normal",
easing: "easeInOutSine",
duration: 600,
delay: anime.stagger(
250,
{ grid: [5, 5], from: stagFrom },
{ start: "100" }
),
});
}
});
});Guárdalo y ciérralo.
Mirada final
Así es como se ve nuestra Galería, ¿no es hermosa?
Ultimas palabras
Si se puede lograr el mejor efecto de animación a través de algunos cambios menores en lugar de usar la animación predeterminada en la galería para brindar a los visitantes una mejor experiencia de usuario, es aconsejable hacer algo tan pequeño. A través del tutorial de hoy, viste cómo creamos hermosas y cautivadoras animaciones de galería con el sistema integrado de Divi y algún código de luz. Si te gusta este tutorial, compártelo con tus amigos de Divi Lover.
