Agregar animación de desplazamiento a Divi y sus máscaras y patrones de fondo es un truco de diseño útil que puede dar nueva vida a los diseños de fondo de su sitio web. Ya le mostramos cómo combinar las opciones de fondo de Divi de manera creativa, incluido cómo crear dos capas de diseños de fondo. Pero, hoy, estamos agregando animación de desplazamiento a las opciones de fondo de Divi.
En este tutorial, le mostraremos cómo crear y animar máscaras y patrones de fondo usando las opciones de desplazamiento de Divi (no se necesita código personalizado). Para hacer esto, crearemos una capa de fondo flotante usando una fila Divi (similar a lo que hicimos aquí) que usaremos para animar las máscaras y patrones de fondo cuando un usuario se desplaza por una sección de contenido. Creemos que te va a gustar el resultado.
¡Empecemos!
Aquí hay una ilustración rápida de cómo se verá la animación de desplazamiento de fondo de este tutorial.
El concepto
El concepto de este diseño no debería ser demasiado difícil de entender. Comenzamos con una sección que tiene un fondo degradado.
Luego creamos una fila que está posicionada (absoluta) para que cubra completamente la sección (como una superposición). Podemos agregar un patrón de fondo a la fila.
Luego podemos agregar una máscara de fondo a la columna.
Luego agregamos efectos de desplazamiento a la fila y la columna (como escala y rotación) que animarán el patrón y la máscara por separado dentro del fondo de la sección.
Cuando ocultamos el desbordamiento de la sección, todo lo que vemos es la animación contenida dentro de la sección.
Descarga el diseño GRATIS
Para poner sus manos en el diseño de diseño 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, haga lo siguiente:
- Navega a la Biblioteca Divi.
- Haga clic en el botón Importar en la parte superior de la página.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Elija el archivo de descarga desde su computadora (asegúrese de descomprimir el archivo primero y use el archivo JSON).
- 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».
- ¡Ahora ten un lienzo en blanco para empezar a diseñar en Divi!
Cómo animar máscaras y patrones de fondo en desplazamiento con Divi
Diseño del fondo de la sección
Primero, omitiremos la creación de una fila y pasaremos directamente a editar la sección predeterminada existente en el generador. Para que nuestro diseño de fondo llene el navegador, necesitamos agregar algo de altura vertical a la sección. Una manera fácil de hacerlo es agregar una altura mínima a la sección.
Abra la configuración de la sección. En la pestaña de diseño, actualice la altura mínima y elimine el relleno de la siguiente manera:
- Altura mínima: 50vw
- Relleno: 0px arriba, 0px abajo
Diseñe un degradado de fondo para la sección
Ahora podemos agregar un degradado de fondo personalizado a la sección. Para este degradado, vamos a agregar 3 paradas de color de degradado que están espaciadas de manera bastante uniforme. Vamos a mantenerlo simple para que podamos concentrarnos en crear nuestros fondos animados en la fila.
Para agregar las primeras paradas de degradado, asegúrese de tener la configuración de la sección abierta en la pestaña de contenido. Luego seleccione la pestaña de degradado y haga clic para agregar un nuevo degradado. Esto agregará dos colores degradados predeterminados. Agregue las siguientes paradas de degradado con un color y una posición de la siguiente manera:
- Parada de gradiente #1: #4158d0 (al 0%)
- Parada de gradiente #2: #c850c0 (al 50%)
- Parada de gradiente #3: #ffcc70 (al 100%)
Luego cambie la dirección del gradiente lineal:
- Dirección del gradiente: 270 grados
Agregar filas a la sección
Ahora que nuestra Sección está en su lugar, agregue una fila de una columna a la sección. Esta fila se usará para nuestra máscara de fondo y animación de desplazamiento de patrón.
A continuación, duplique la fila que acaba de crear. Esta segunda fila (duplicada) se usará para nuestro contenido como lo haría normalmente. Ahora debería tener una fila superior para la animación de desplazamiento de fondo y una fila para el contenido normal.
Personaliza la fila
Ahora que nuestro degradado de fondo de sección está listo, podemos dirigir nuestra atención a la fila que vamos a usar para nuestra animación de desplazamiento de fondo. Abra la configuración de la fila. En la pestaña Avanzado, actualice lo siguiente:
- Posición: Absoluta
Esto permitirá que la fila quede encima (o superpuesta) de la sección sin ocupar espacio real en el documento. Ahora, todo lo que tenemos que hacer es actualizar la altura y el ancho para que abarque todo el ancho y la altura de la sección. Esto creará la superposición que necesitamos y nuestra segunda capa de diseño de fondo.
En la pestaña de diseño, actualice las opciones de tamaño de la siguiente manera:
- Igualar alturas de columna: SÍ
- Ancho: 100%
- Ancho máximo: 100%
- Altura: 100%
- Relleno: 0px arriba, 0px abajo
Ahora es posible que no pueda ver la fila, pero ahora se superpone perfectamente a todo el fondo de la sección.
Crear un patrón de fondo para la fila
En este ejemplo, vamos a agregar el patrón Confeti como fondo de la fila.
Abra la configuración de la fila. En la opción de fondo, seleccione la pestaña de patrones y actualice lo siguiente:
- Patrón de fondo: confeti
- Color del patrón: #f6bef7
- Tamaño del patrón: Tamaño personalizado
- Ancho del patrón: 35vw
- Patrón repetido Origen: Centro
NOTA: El uso de la unidad de longitud VW asegurará que el patrón se escale con el navegador, manteniendo el diseño consistente y receptivo.
Agregar efectos de desplazamiento a la fila
Ahora que nuestro patrón de fondo está en su lugar, podemos agregar efectos de desplazamiento a la fila.
Vaya a la pestaña Avanzado. En las opciones de efectos de desplazamiento, actualice lo siguiente:
Seleccione la pestaña Movimiento horizontal y actualice lo siguiente:
- Habilitar movimiento horizontal: SÍ
- Desplazamiento inicial: 0,5 (al 0 %)
- Compensación media: 0 (del 40 % al 60 %)
- Compensación final: -0.5 (al 100%)
Esto moverá el patrón de fondo de la fila comenzando desde 50px hacia la izquierda y terminando en 50px hacia la derecha.
Seleccione la pestaña Escalar hacia arriba y hacia abajo y actualice lo siguiente:
- Habilitar escalado hacia arriba y hacia abajo: SÍ
- Escala inicial: 150 % (al 0 %)
- Escala Media: 100% (del 40% al 60%)
- Escala final: 150% (al 100%)
Esto escalará el patrón de fondo de la fila de 150% a 100% a 150% en el desplazamiento.
Seleccione la pestaña Rotación y actualice lo siguiente:
- Habilitar rotación: SÍ
- Rotación inicial: 10 grados (al 0%)
- Rotación media: 0 grados (del 40 % al 60 %)
- Rotación final: -10 grados (al 100%)
CONSEJO CLAVE: querrá mantener la rotación al mínimo o corre el riesgo de mostrar espacios donde la fila no se extiende más allá de la sección. Una buena regla general es aumentar la escala si va a aumentar la rotación. Esto permitirá que la fila gire sobre la sección sin exponer ningún borde.
Agregue una máscara de fondo con efectos Scoll a la columna
Con nuestra fila terminada, estamos listos para agregar una máscara de fondo con efectos de desplazamiento a la columna dentro de la misma fila. Para comenzar, agreguemos una máscara de fondo.
Para hacer esto, abra la configuración de la columna. En la pestaña de máscaras, actualice lo siguiente:
- Máscara: Capa Blog
- Color de la máscara: #ffffff
- Transformación de máscara: Voltear horizontalmente, Invertir
Agregar efectos de desplazamiento a la columna
Ahora que nuestra máscara de fondo está en su lugar, podemos agregar efectos de desplazamiento a la columna. Tenga en cuenta que la columna ya tiene efectos de desplazamiento heredados de la fila principal. Todo lo que vamos a hacer es rotar la columna en la dirección opuesta a la fila para obtener una mayor separación de la máscara y el patrón durante la animación de desplazamiento.
Vaya a la pestaña Avanzado. En las opciones de efectos de desplazamiento, seleccione la pestaña Rotación y actualice lo siguiente:
- Habilitar rotación: SÍ
- Rotación inicial: -15 grados (al 0%)
- Rotación media: 0 grados (del 40 % al 60 %)
- Rotación final: 15 grados (al 100%)
Ocultar el desbordamiento de la sección
Actualmente, la fila permanecerá visible siempre que la animación de desplazamiento haga que se extienda más allá de la sección.
Para limpiar esto, necesitamos ocultar el desbordamiento de la sección. Para hacer esto, abra la configuración de la sección. En la pestaña Avanzado, actualice las opciones de visibilidad de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Ahora eso se ve mejor.
Adición de contenido a la fila de contenido
En este punto, la máscara de fondo y la animación de desplazamiento del patrón están completas. Todo lo que tenemos que hacer es agregar cualquier contenido que queramos a la fila que creamos anteriormente para el contenido.
Para este ejemplo, agregué un título simulado para que podamos ver cómo se verá la animación de fondo con texto estático.
Puede descargar el diseño del tutorial anterior si desea verificar la configuración utilizada para el módulo de fila y texto.
Resultado final
Echemos un vistazo al resultado final de nuestro diseño.
¡Cambialo!
Para una apariencia diferente, puede probar diferentes máscaras y patrones en cada capa. Si desea obtener más inspiración sobre cómo usar máscaras y patrones de fondo , consulte estos 12 diseños de máscaras y patrones de fondo para descargar gratis .
Gradient Builder también puede crear fácilmente algunos fondos degradados sorprendentes para la sección. Puede ver nuestras demostraciones en vivo de más posibilidades de diseño de degradado de fondo.
Pensamientos finales
Es sorprendente lo fácil que es crear diseños de fondo tan hermosos con las opciones de fondo de Divi. Y agregar animación de desplazamiento con los efectos de desplazamiento de Divi da nueva vida a esos diseños.
Para obtener más información, puede consultar nuestro tutorial similar sobre cómo agregar dos capas de diseños de fondo .
Además, consulte nuestras publicaciones de lanzamiento de funciones sobre el generador de gradientes y las máscaras y patrones de fondo .
También puede resultarle útil saber cómo usar máscaras y patrones para diseñar una sección principal .
Espero escuchar de usted en los comentarios.
¡Salud!