¿Te gustaría diseñar un fondo? Divi animado al desplazarse por la página gracias a las máscaras y patrones? Este tutorial es para ti...
Adición de una animación de desplazamiento a Divi y sus máscaras y patrones de fondo son un consejo de diseño útil que puede dar nueva vida a sus diseños de fondo. Sitio web.
En este tutorial, le mostraremos cómo crear y animar máscaras y patrones de fondo utilizando las opciones de desplazamiento de Divi (no se necesita código personalizado).
Para ello crearemos una capa de fondo flotante usando una línea Divi que usaremos para animar máscaras y patrones de fondo cuando un usuario se desplaza por una sección de contenido.
Creemos que te gustará el resultado.
Vamos a empezar!
vista
Aquí hay una ilustración rápida de cómo se verá la animación de desplazamiento de fondo para 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 línea 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.
A continuación, podemos agregar una máscara de fondo a la columna.
Luego agregamos efectos de desplazamiento a fila y columna (como escala y rotación) que animarán el patrón y la máscara por separado en el 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.
Comencemos creando una página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Uso Divi Astillero
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Lea también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Cómo crear patrones y máscaras de fondo de desplazamiento animado con Divi
Diseño de fondo de sección
Primero, omitiremos la creación de una línea y pasaremos directamente a editar la sección predeterminada existente en el generador de temas.
Para hacer que nuestro diseño de fondo llene el navegador, necesitamos agregar una altura vertical a la sección. Una forma sencilla de hacer esto es agregar una altura mínima a la sección.
Configuración de la sección abierta. Debajo de la pestaña Diseño, actualice la altura mínima y elimine el relleno de la siguiente manera:
- Margen: 80 vh (superior e inferior)
- Relleno: 0px (superior e inferior)
Diseñar un degradado de fondo para la sección.
Ahora podemos agregar un degradado de fondo personalizado a la sección.
Para agregar las primeras paradas de degradado, asegúrese de que la configuración de la sección esté abierta en la pestaña Contenido. Luego selecciona la pestaña Gradiente de fondo y haga clic para agregar un nuevo degradado. Esto agregará dos colores degradados predeterminados. Agregue las siguientes paradas de degradado con color y posición de la siguiente manera:
- Paradas de gradiente:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
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 línea se usará para nuestra máscara de fondo y animación de desplazamiento de patrón.
A continuación, duplique la línea que acaba de crear. Esta segunda línea (duplicada) se utilizará para nuestra contenido como lo haría normalmente.
Ahora debería tener una línea superior para la animación de desplazamiento de fondo y una línea para la contenido Normal.
Personalizar línea
Ahora que tenemos listo el gradiente de fondo de nuestra sección, podemos centrar nuestra atención en la línea que vamos a usar para nuestra animación de fondo en desplazamiento.
Configuración de línea abierta. Debajo de la pestaña Avanzado, actualice lo siguiente:
- Posición: Absoluta
Esto permitirá que la línea se superponga a la sección sin ocupar ningún espacio real en el documento.
Ahora todo lo que tenemos que hacer es actualizar la altura y el ancho para que abarquen 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 Diseño, actualice las opciones de tamaño de la siguiente manera:
- Alturas de columna Aquasize: SÍ
- Ancho: 100%
- Ancho máximo: 100%
- Altura: 100%
- Relleno: 0px (superior e inferior)
Ahora es posible que no pueda ver la línea, pero ahora cubre perfectamente el fondo de toda la sección.
Crea un patrón de fondo para la línea.
En este ejemplo agregaremos el patrón Confeti como fondo de línea.
Configuración de línea abierta. Bajo la opción Antecedentes, seleccione la pestaña Patrón de fondo y actualiza lo siguiente:
- Patrón de fondo: confeti
- patrón:
- Color: #f6bef7
- Tamaño: Tamaño personalizado
- Ancho: 35 vw
- Repetir Origen: centro
NOTA : El uso de la unidad de longitud VW garantiza que el patrón se escalará con el navegador, manteniendo el diseño coherente y receptivo.
Agregar efectos de desplazamiento a la línea
Ahora que nuestro patrón de fondo está en su lugar, podemos agregar efectos de desplazamiento a la línea.
Ir a la pestaña Avanzado. Bajo la opción Efectos de desplazamiento, actualice lo siguiente:
Seleccione la pestaña Movimiento horizontal y actualiza 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 línea comenzando 50 píxeles a la izquierda y terminando 50 píxeles a 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 al desplazarse.
Seleccione la pestaña « Giratorio » y actualiza 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: Debe mantener la rotación al mínimo o corre el riesgo de mostrar espacios donde la línea no se extiende más allá de la sección. Una buena regla general es aumentar la escala si desea aumentar la rotación. Esto permitirá que la línea pivote sobre la sección sin exponer los bordes.
Agregar máscara de fondo con efectos de desplazamiento a la columna
Una vez que nuestra fila esté completa, estamos listos para agregar una máscara de fondo con efectos de desplazamiento a la columna de la misma fila. Para comenzar, agreguemos una máscara de fondo.
Para hacer esto, abra la configuración de la columna. Debajo de la pestaña Máscara de fondo, actualice lo siguiente:
- Máscara: gota de capa
- Color: #ffffff
- Transformación de máscara: volteo horizontal, inversión
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 lograr una mayor separación de la máscara y el patrón durante el desplazamiento.
Ir a la pestaña Avanzado. En opciones Efectos de desplazamiento, seleccione la pestaña Rotaciónng 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 desbordamiento de sección
Actualmente, la línea permanece visible cada vez que el desplazamiento hace 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. Debajo de la pestaña Avanzado, actualice las opciones de visibilidad de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Ahora se ve mejor.
Ver también: Divi: 12 combinaciones de máscaras y patrones de fondo
Agregar contenido a la línea creada para este propósito
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 el contenido que queremos a la línea que creamos anteriormente para el contenido.
Para este ejemplo, hemos agregado un título ficticio para que podamos ver cómo se verá la animación de fondo con texto estático.
Resultado final
Echemos un vistazo al resultado final de nuestro diseño.
Descarga DIVI ahora!!!
Conclusión
Es sorprendente lo fácil que es crear fondos tan hermosos con las opciones de fondo de Divi. Además, agregar animación con los efectos de desplazamiento de Divi da nueva vida a estos diseños.
Para una apariencia diferente, puede probar diferentes máscaras y patrones en cada capa. Si desea obtener más inspiración sobre cómo utilizar el máscaras y patrones fondo, echa un vistazo a estos 12 combinaciones de patrones y máscaras de fondo
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
