Cómo combinar el ajuste de desplazamiento y los efectos de movimiento para animaciones fluidas

Si está buscando una manera de crear animaciones fluidas con Divi y sus efectos de desplazamiento incorporados, le encantará esta publicación. Le mostraremos cómo combinar el ajuste de desplazamiento con los efectos de movimiento integrados de Divi para crear secciones de altura completa entre las que puede desplazarse de una sola vez. Comenzaremos creando la primera sección. Entonces, reutilizaremos esa sección en todo el diseño de nuestra página. Para habilitar el ajuste de desplazamiento, usaremos las propiedades de ajuste de desplazamiento de CSS que asignaremos a las secciones, HTML, encabezado y pie de página de nuestra página. ¡También podrá descargar el archivo JSON de la página de forma gratuita!

Hagámoslo.

Avance

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 de animaciones suaves GRATIS

Para poner sus manos en el diseño de animaciones suaves y gratuitas, 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!

Suscríbete a nuestro canal de Youtube

1. Crear nueva página y comenzar a diseñar la primera sección

Agregar nueva página y cambiar a Visual Builder

Comience agregando una nueva página. Ingrese el título de la página, publíquela y cambie a Visual Builder.

Ajustes de sección

Dimensionamiento

Una vez dentro de la nueva página, abra la sección que ya está allí y cambie la configuración de tamaño.

  • Altura mínima: 100vh

Elemento principal

También estamos agregando dos líneas de código CSS a la sección. Estas líneas de código CSS nos ayudarán a convertir la sección en un punto de ajuste para el ajuste de desplazamiento.

01
02
scroll-snap-align: start;
scroll-snap-stop: normal;

Visibilidad

Para asegurarnos de que nada supere el contenedor de la sección, ocultaremos los desbordamientos de la sección.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

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 ningún módulo todavía, abra la configuración de la fila y modifique el tamaño de la siguiente manera:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

También eliminaremos el relleno superior e inferior predeterminado de la sección.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Posición

Y cambiaremos la posición de la fila en consecuencia:

  • Posición: Absoluta
  • Ubicación: centro inferior

Agregar módulo de texto a la columna

Dejar el cuadro de contenido vacío

El único módulo que necesitamos en esta fila es un módulo de texto. Asegúrese de dejar el cuadro de contenido del módulo vacío.

Color de fondo

Luego, cambia el color de fondo.

  • Color de fondo: #ffee00

Configuración de texto

También eliminaremos la altura de la línea de texto del módulo.

  • Altura de línea de texto: 1em

Dimensionamiento

Luego, iremos a la configuración de tamaño y cambiaremos el ancho.

  • Ancho: 30%

Espaciado

Convertiremos el módulo en un cuadrado agregando también algo de relleno superior.

  • Acolchado superior: 30%

Añadir Fila #2

Estructura de la columna

A la siguiente fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 60vw
  • Ancho máximo: 100%

Espaciado

A continuación, agregue un margen superior personalizado en diferentes tamaños de pantalla.

  • Margen superior: 20vh (escritorio), 5vw (tableta y teléfono)

Columna 2 Espaciado

Luego, abriremos la configuración de la columna 2 y agregaremos algunos valores de relleno personalizados.

  • Acolchado superior: 2vh (tableta y teléfono)
  • Acolchado izquierdo: 2vw
  • Acolchado derecho: 2vw

Agregar módulo de imagen a la columna 1

Cargar imagen

Es hora de agregar módulos, agregue un módulo de imagen a la columna 1 y cargue una imagen de su elección.

Dimensionamiento

A continuación, forzaremos el ancho completo en el módulo.

  • Forzar ancho completo: Sí

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H2

En la segunda columna, el primer módulo que necesitamos es un módulo de texto con algo de contenido H2.

Configuración de texto H2

Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:

  • Encabezado 2 Fuente: Anton
  • Título 2 Tamaño del texto: 5vw (Escritorio), 7vw (Tableta), 9vw (Teléfono)

Agregue el Módulo de Texto #2 a la Columna 2

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e inserte 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 de texto: Open Sans
  • Tamaño del texto: 0.8vw (Escritorio), 2vw (Tablet), 2.5vw (Teléfono)
  • Altura de la línea de texto: 1,8 em

Espaciado

Y agregue un margen superior e inferior personalizado a la configuración de espaciado.

  • Margen superior: 2vw
  • Margen inferior: 2vw

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que necesitamos en esta columna es un módulo de botón. Agregue alguna copia de su elección.

Configuración de botones

Dale estilo al botón en consecuencia:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Color del texto del botón: #333333
  • Color del borde del botón: #333333
  • Radio del borde del botón: 1px

  • Fuente del botón: Anton
  • Estilo de fuente del botón: Mayúsculas

Espaciado

Y complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

2. Agregue efectos de desplazamiento a diferentes elementos

Módulo de texto en la fila #1

movimiento vertical

Una vez que todos los elementos están en su lugar, es hora de agregar los efectos de desplazamiento . Abra el Módulo de texto en su primera fila y use un poco de movimiento vertical.

  • Habilitar movimiento vertical: Sí
  • Compensación inicial: 4
  • Desplazamiento medio: 0
  • Compensación final: -4
  • Disparador de efecto de movimiento: medio del elemento

Fila #2

columna 1

movimiento horizontal

Luego, abra la primera columna de su segunda fila y agregue un poco de movimiento horizontal.

  • Habilitar movimiento horizontal: Sí
  • Compensación inicial: -3
  • Compensación media: 0 (del 40 % al 60 %)
  • Compensación final: -3
  • Disparador de efecto de movimiento: medio del elemento

Desvanecimiento de entrada y salida

También estamos aplicando un efecto de aparición y desaparición gradual a esa misma columna.

  • Habilitar aparición y desaparición gradual: Sí
  • Opacidad inicial: 0%
  • Opacidad media: 100%
  • Opacidad final: 100%
  • Disparador de efecto de movimiento: medio del elemento

columna 2

movimiento horizontal

Luego, abriremos la configuración de la segunda columna y aplicaremos la siguiente configuración de movimiento horizontal:

  • Habilitar movimiento horizontal: Sí
  • Compensación inicial: 3
  • Compensación media: 0 (del 40 % al 60 %)
  • Compensación final: 3
  • Disparador de efecto de movimiento: medio del elemento

Desvanecimiento de entrada y salida

Junto con un efecto de entrada y salida gradual.

  • Habilitar aparición y desaparición gradual: Sí
  • Opacidad inicial: 0%
  • Opacidad media: 100%
  • Opacidad final: 100%
  • Disparador de efecto de movimiento: medio del elemento

4. Reutilizar la primera sección

Clonar sección cuatro veces

Una vez que hayas completado la primera sección y sus efectos de desplazamiento, puedes clonarlo tantas veces como quieras.

Cambiar los colores de fondo de cada otra sección

Cambiaremos el color de fondo de cada otra sección.

  • Color de fondo: #111111

5. Agregue el código CSS para habilitar el ajuste de desplazamiento en el HTML de la página

Agregar módulo de código a la última sección de la página

Ahora, para habilitar el ajuste de desplazamiento en el HTML de nuestra página, agregaremos un módulo de código en cualquier lugar de la última sección de nuestra página.

Insertar código HTML CSS

Estas líneas de código CSS nos ayudarán a aplicar el ajuste de desplazamiento al HTML de nuestra página:

01
02
03
04
05
06
07
08
<style>
 
html {
overflow-x: hidden;
scroll-snap-type: y proximity;
}
 
</style>

Agregar inicio de ajuste de desplazamiento al encabezado y pie de página

Nos aseguraremos de que nuestro encabezado y pie de página también sean puntos de ajuste de desplazamiento (al igual que nuestras secciones) agregando las siguientes líneas de código CSS también:

01
02
03
header, footer {
scroll-snap-align: start;
}

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 crear animaciones fluidas combinando el ajuste de desplazamiento con los efectos de movimiento integrados de Divi. Esta es una excelente manera de habilitar los efectos de desplazamiento con un solo desplazamiento. El ajuste de desplazamiento ayuda a los visitantes a desplazarse sin esfuerzo por diferentes partes de su sitio web. Hemos combinado esto con un diseño de sección de altura completa. ¡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.