Cuando se trata de animar elementos en su página, lo más probable es que desee activar la animación de un elemento una vez que ingrese a la ventana gráfica. Con Divi y sus configuraciones de animación integradas, tan pronto como ese elemento aparezca y se haya animado, permanecerá estático hasta que vuelvas a cargar la página completa. En algunos casos, puede buscar un enfoque más consistente, donde su animación se reinicia con cada entrada de la ventana gráfica. Hacer esto lo ayudará a optimizar la experiencia que los visitantes tienen en su sitio web. En este tutorial, le mostraremos exactamente cómo hacerlo usando Divi, GSAP y ScrollTrigger para GSAP. Una vez que obtenga el enfoque, podrá aplicarlo a cualquier elemento de su página. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño GRATIS
Para poner sus manos en el diseño gratuito, 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!
1. Crear diseño de sección
Agregar sección de marcador de posición
Antes de comenzar a crear el diseño, agregaremos dos secciones de marcador de posición a la página en la que estamos trabajando. De esa manera, podemos ver la experiencia de desplazamiento una vez que el diseño esté terminado. Alternativamente, puede usar el diseño dentro de una página que ya haya configurado. Agregar una nueva sección regular.
Dimensionamiento
Modifique la altura de la sección de la siguiente manera:
- Altura: 100vh
Sección de marcador de posición de clonación
Luego, clone la sección una vez.
Agregar nueva sección entre secciones de marcador de posición
Para crear el diseño que pudo ver en la vista previa de esta publicación, agregaremos una nueva sección regular entre las secciones de marcador de posición.
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho: 90%
- Ancho máximo: 2080px
Agregue el módulo de texto n. ° 1 a la columna
Agregar contenido
Luego, agregue un primer módulo de texto a la columna e incluya algún contenido de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Peso de fuente de texto: Pesado
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #f9f9f9
- Tamano del texto:
- Escritorio: 150px
- Tableta y teléfono: 11vw
- Altura de línea de texto: 1,1 em
- Alineación de texto: Centro
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido H2
Agregue otro módulo de texto debajo del anterior e incluya algo de contenido H2.
Configuración de texto H2
Estilo el texto H2 de la siguiente manera:
- Título 2 Fuente: Montserrat
- Encabezado 2 Alineación de texto: Centro
- Título 2 Tamaño del texto:
- Escritorio: 80px
- Tableta y teléfono: 10vw
Dimensionamiento
Agregue un ancho de 100% también.
- Ancho: 100%
Posición
Y reposicione todo el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Centro
Añadir Fila #2
Estructura de la columna
Agregue otra fila debajo de la anterior, utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de fila y ajuste la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho: 90%
- Ancho máximo: 2080px
Configuración de la columna 1
Luego, abra la configuración de la columna 1.
Imagen de fondo
Cargue una imagen de fondo de su elección.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Espaciado
Modifique la configuración de espaciado de la columna a continuación.
- Relleno superior: 100px
- Acolchado inferior:
- Escritorio: 400px
- Tableta y teléfono: 200px
- Relleno izquierdo: 5,5%
- Relleno derecho: 5,5%
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H4
Luego, agregue un módulo de texto a la columna 1 con algo de contenido H4.
Configuración de texto H4
Estilo el texto H4 en consecuencia:
- Encabezado 4 Fuente: Lato
- Encabezado 4 Peso de fuente: Pesado
- Título 4 Estilo de fuente: Mayúsculas
- Encabezado 4 Tamaño del texto: 13px
- Encabezado 4 Espaciado entre letras: 2px
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido H3
Agregue otro módulo de texto debajo del anterior, usando algo de contenido H3.
Configuración de texto H3
Cambie la configuración de texto H3 en consecuencia:
- Título 3 Fuente: Montserrat
- Título 3 Tamaño del texto: 36px
- Encabezado 3 Espaciado entre letras: 1px
- Encabezado 3 Altura de línea: 1,2 em
Agregue el Módulo de Texto #3 a la Columna 1
Agregar contenido de descripción
Agregue el último módulo de texto que contiene algún contenido de descripción de su elección.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente del texto: Lato
- Color del texto: #4c4c4c
- Espaciado entre letras de texto: 0.5px
- Altura de línea de texto: 2em
Agregar copia
El último módulo que necesitamos en esta columna es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Dale estilo al botón en la pestaña de diseño.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #000000
- Ancho del borde del botón: 0px
- Fuente del botón: Lato
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
Reutilizar la columna 1
Eliminar columna 2 y 3
Una vez que haya completado la columna 1 y todos los módulos dentro de ella, puede eliminar las dos columnas restantes de la fila.
Clonar columna 1 dos veces
Y reutilice la columna 1 clonándola dos veces.
Cambiar imágenes de fondo de columnas duplicadas
Asegúrese de cambiar la imagen de fondo de cada columna duplicada.
Cambiar contenido en columnas duplicadas
Junto con el contenido del módulo.
Agregar transformación Traducir a la configuración de la columna 2
Luego, abra la configuración de la columna 2 y vaya a la pestaña de diseño. Una vez allí, agregue algunos valores de traducción de transformación en diferentes tamaños de pantalla para completar el diseño.
- Izquierda:
- Escritorio: 50px
- Tableta y teléfono: 0px
2. Aplicar la técnica de animación de reinicio al diseño
Agregue la clase CSS a la fila n. ° 2
Ahora que nuestro diseño está en su lugar, podemos centrarnos en la técnica de animación de reinicio. Vamos a apuntar a varios módulos a la vez para esto. Primero, abra la configuración de la segunda fila y aplique la siguiente clase CSS:
- Clase CSS: desencadenar-animación-fila
Agregar módulo de código a la fila n.º 1
La clase CSS que agregamos en el paso anterior de este tutorial nos ayudará a orientar todos los módulos dentro de esta fila a la vez. Para crear la animación de reinicio, usamos código JQuery, la biblioteca JavaScript de GSAP y la biblioteca ScrollTrigger para GSAP. Para agregar este código, insertaremos un nuevo módulo de código debajo del segundo módulo de texto en la fila n.º 1.
Agregar bibliotecas GSAP y ScrollTrigger
Asegúrese de agregar las bibliotecas GSAP y ScrollTrigger dentro de nuevas etiquetas de script.
- https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
- https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js
Luego, agregue nuevas etiquetas de secuencias de comandos debajo de las etiquetas de secuencias de comandos de la biblioteca.
Agregar GSAP + función ScrollTrigger
Dentro de las nuevas etiquetas de script, copiaremos y pegaremos las siguientes líneas de código JQuery:
|
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
|
jQuery(document).ready(function($){var $module = $('.trigger-animation-row .et_pb_module');$module.each(function(){var $thisModule = $(this);gsap.from($thisModule[0], {scrollTrigger: {trigger: this,start: "bottom bottom",end: "center top",scrub: false,repeat: -1,toggleActions:'restart none none reset'},opacity: 0,x: -100,scale: 1.1,duration: 2,ease: "back"});});}); |
Este código apuntará a todos los módulos de fila a la vez y reiniciará la animación tan pronto como un visitante ingrese nuevamente a la ventana gráfica. La animación, en este caso, es bastante sencilla y mínima. Sin embargo, con GSAP y ScrollTrigger, puede crear cualquier tipo de animación que desee, ¡así que definitivamente vale la pena investigarlo!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo reiniciar una animación tan pronto como el elemento ingresa a la ventana gráfica. Este enfoque lo ayuda a crear una experiencia consistente, sin importar cómo se desplazan sus visitantes. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.