Cómo combinar efectos de desplazamiento con fondos CSS Parallax en Divi

Vistazo

Aquí hay un vistazo rápido a los efectos de desplazamiento de fondo css parallax que diseñaremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)
3. Imágenes que se utilizarán para contenido simulado

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Creación de un efecto de desplazamiento de paralaje de ruptura en Divi

Primero, cree una sección regular con una fila de una columna.

Antes de agregar un módulo, abra la configuración de la sección y agregue una imagen de fondo usando CSS parallax.

Asegúrate de que la imagen tenga al menos 1920 px de ancho. El diseño funciona bien con una imagen de fondo más oscura con mucha textura. Estoy usando uno de nuestro paquete de diseño de cafetería que está disponible en Divi Builder.

Luego agregue algo de relleno a la sección de la siguiente manera:

Acolchado: 10vw arriba, 10vw abajo

Agregar un módulo de Blurb

Una vez que el fondo y el relleno de la sección estén en su lugar, agregue un módulo de publicidad a la fila.

Luego actualice el contenido de la propaganda con algunas oraciones del cuerpo del texto. Puede mantener el título predeterminado allí.

Luego haga clic para usar un ícono y seleccione el ícono de café para la propaganda.

Una vez que el contenido esté listo, actualice la configuración de diseño de la siguiente manera:

Color del icono: #ffffff

Tamaño de la fuente del icono: 50 px

Alineación del texto: centro

Fuente del título:

Estilo de fuente del título Oswald TT

Color del texto del título: #ffffff

Espaciado entre letras del título: 2 px

Fuente del cuerpo: Nunito

Color del texto del cuerpo: #ffffff

Espaciado entre letras del cuerpo: 1 px

Relleno: 30px arriba, 30px abajo, 30px izquierda, 30px derecha

Ajustar ancho de fila

Una vez que se haya diseñado la publicidad, vaya a la configuración de la fila y ajuste el ancho máximo.

Ancho máximo: 80%

Configuración de columna

Para este ejemplo, vamos a activar el efecto de desplazamiento a nivel de columna. Esto le permite usar varios módulos para crear el contenido, aunque por ahora solo estamos usando un solo módulo de publicidad.

Para que este efecto de desplazamiento de paralaje funcione, debemos agregar la misma imagen de fondo a la columna que usamos en nuestra sección. También necesitaremos usar el mismo método de paralaje CSS en la imagen de fondo de la columna.

Abra la configuración de la columna y agregue esa misma imagen de fondo usando CSS parallax.

No podrá ver ninguna diferencia entre la imagen de fondo de la columna y la imagen de fondo de la sección porque ambas usan parallax de CSS, que esencialmente fija la imagen exactamente en el mismo lugar en la página web. Sin embargo, verá la diferencia una vez que el efecto de desplazamiento esté en su lugar.

Continúe actualizando la configuración del diseño de la columna de la siguiente manera:

Acolchado: 4vw arriba, 4vw abajo

Esquinas redondeadas: 10px

Luego, asigne a la columna una sombra de cuadro que solo se muestra al pasar el mouse de la siguiente manera:

Sombra de cuadro: ver captura de pantalla

Posición vertical de sombra de cuadro: 0px

Intensidad de desenfoque de sombra de cuadro: 36px

Color de sombra (predeterminado): rgba(0,0,0,0)

Color de sombra (desplazamiento): rgba(0,0,0,0.72)

Ahora vayamos a las opciones de transformación y actualicemos los siguientes estilos de transformación al pasar el mouse:

Escala de transformación (flotar): 105%

Esto agrandará la columna (y su contenido) ligeramente para crear el efecto de sobresalir ligeramente de la imagen de fondo.

Transformar traducir el eje Y (pasar el mouse): -2.5%

Esto mueve la columna ligeramente hacia arriba al pasar el mouse para crear un ligero desplazamiento asimétrico.

Transformar origen: 100 % 50 % (parte inferior central)

Esto inicia el efecto de escala desde el origen central inferior que, cuando se combina con el valor de traducción, se asemeja a un sutil efecto de bisagra.

Aquí está el efecto de desplazamiento de paralaje css hasta ahora.

Ahora abra la configuración de la fila y duplique la columna dos veces para crear un total de tres columnas, cada una con los mismos efectos publicitarios y de desplazamiento.

Resultado final

Aquí está el diseño final. Observe cómo las imágenes de fondo de paralaje se ocultan de forma predeterminada al desplazarse hacia abajo en la página. Luego aparecen al pasar el cursor sobre cada una de las columnas a medida que aparecen. También puede ver las funciones de paralaje en la columna cuando se desplaza hacia abajo en la página mientras se desplaza sobre la columna. Es un efecto de desplazamiento sutil, pero extremadamente único.

Agregar rotación al efecto Hover

También podemos agregar una rotación al efecto de desplazamiento de paralaje css que agrega un toque agradable al diseño. Simplemente abra cada una de las configuraciones de columna y actualice lo siguiente:

Transformar Girar eje Z (al pasar el mouse): 5 grados

Si desea mezclarlo, puede darle a la columna central una rotación de -5 grados.

Aquí esta el resultado final.

Y aquí está el mismo diseño con una imagen de fondo más clara y un texto más oscuro.

Parte 2: Crear un efecto de desplazamiento de paralaje de lupa en Divi

Duplique la sección del primer diseño y luego abra la configuración de la sección y reemplace la imagen de fondo con una nueva. Estoy usando el de nuestro Video Game Layout Pack porque realmente resalta el efecto de desplazamiento de paralaje de aumento.

Actualizar configuración de fila

Vamos a necesitar espacio adicional para este diseño, así que abra la configuración de la fila y actualice lo siguiente:

Ancho del canalón: 1

Ancho: 100 %

Ancho máximo: 98 %

Después de eso, salta a la pestaña de contenido y elimina dos de las columnas para que solo quede una.

Configuración de columna

Para este diseño, debemos aplicar el efecto de desplazamiento al nivel del módulo en lugar del nivel de la columna, por lo que debemos restablecer los estilos predeterminados para la columna. Para hacer eso, haga clic derecho en el elemento de la columna y seleccione «restablecer estilos de elementos».

Actualizar módulo Blurb

Después de restaurar la configuración de la columna a los estilos predeterminados, abra la configuración del módulo de publicidad y agregue la misma imagen de fondo css parallax que se agregó a la sección.

Dimensionamiento

Para crear un módulo circular, primero debemos darle un ancho y una altura coincidentes de la siguiente manera:

Ancho: 300 px

Alineación del módulo: centro

Altura: 300 px

Borde

Para completar el efecto circular, necesitamos actualizar las esquinas redondeadas y darle un ligero borde.

Esquinas redondeadas: 50%

Ancho del borde: 1px

Color del borde: rgba(255,255,255,0.12)

Efecto de desplazamiento de sombra de cuadro

A continuación, dale a la publicidad una sombra de cuadro al pasar el mouse de la siguiente manera:

Sombra de cuadro: ver captura de pantalla

Intensidad de desenfoque de sombra de cuadro: 36 px

Color de sombra (predeterminado): rgba(0,0,0,0)

Color de sombra (hover): rgba(0,0,0,0.7)

Transformar efectos de desplazamiento

Una vez que su cuadro de sombra esté en su lugar, actualice las opciones de transformación de la siguiente manera:

Transformar origen (predeterminado): 50 % 0 % (centro izquierda)

Esto asegurará que la propaganda no se extienda fuera de la página una vez que se coloque en el extremo izquierdo de la fila de tres columnas.

Escala de transformación (flotar): 130%

Esto ampliará la propaganda y realmente magnificará la imagen de fondo de paralaje para un efecto de desplazamiento genial.

Duplicar la columna

Una vez que la propaganda está lista, podemos duplicar la columna para crear tres columnas, cada una con el mismo módulo de propaganda.

Abra la configuración de la fila y duplique la columna dos veces para un total de tres columnas.

Actualizar origen de transformación

Dado que todos nuestros módulos de publicidad tienen el origen de transformación establecido en «centro izquierda», debemos ajustar esto para las publicidades en el centro y la columna derecha para que se escalen desde la posición adecuada.

Abra la configuración del módulo de publicidad en la columna 2 y actualice lo siguiente:

Transformar Origen: 50% 50% (centro centro)

Luego abra la configuración para el módulo de publicidad en la columna 3 y actualice lo siguiente:

Transformar Origen: 50% 100% (centro derecha)

Resultado final

Ahora mira el resultado final. Observe cómo el efecto realmente magnifica la imagen de fondo de paralaje css detrás de la propaganda. Y cuando se desplaza hacia abajo mientras se desplaza sobre la publicidad, se parece al efecto de una lupa.

De hecho, esto es tan genial que quizás querríamos dejarlo como el estilo predeterminado en lugar de solo en el estado de desplazamiento.

Pensamientos finales

Espero que los ejemplos en esta publicación hayan hecho fluir un poco su creatividad para que pueda explorar diseños aún más geniales y efectos de desplazamiento para combinar con css parallax. El proceso de configuración es realmente simple, pero las posibilidades parecen infinitas.

Espero escuchar de usted en los comentarios.

¡Salud!