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


El uso de CSS Parallax con imágenes de fondo en Divi nos permite crear efectos de desplazamiento que son sorprendentemente únicos. Parallax es una de las muchas formas en que podemos agregar vida a nuestros sitios web. Y cuando combinamos paralaje con la amplia gama de opciones de desplazamiento de Divi, damos vida al contenido aún más.

En este tutorial, le mostraremos que puede diseñar rápida y fácilmente efectos únicos de desplazamiento del fondo de paralaje CSS en Divi. ¡No se necesita plugin ni codificación personalizada!

Empecemos.

Vistazo

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

divi css paralaje efectos de desplazamiento

divi css paralaje efectos de desplazamiento

divi css paralaje efectos de desplazamiento

Descargar 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" 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 al 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 (generador visual)
  3. Imágenes para ser utilizadas como contenido simulado

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

Parte 1: Crear un efecto de desplazamiento de paralaje paralelo en Divi

Primero, cree una sección regular con una fila de una columna.
divi css paralaje efectos de desplazamiento

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

Asegúrese de que la imagen tenga al menos 1920px 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.

divi css paralaje efectos de desplazamiento

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

Acolchado: 10vw arriba, 10vw abajo

divi css paralaje efectos de desplazamiento

Agregar un módulo de publicidad

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

divi css paralaje efectos de desplazamiento

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

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

divi css paralaje efectos de desplazamiento

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 fuente del icono: 50 px
Alineación de texto: centro
Fuente del título: Oswald
Título Estilo de fuente TT
Color del texto del título: #ffffff
Espaciado entre letras de título: 2px
Fuente del cuerpo: Nunito
Color del texto del cuerpo: #ffffff
Espaciado de letras del cuerpo: 1px
Relleno: 30px arriba, 30px abajo, 30px izquierda, 30px derecha

divi css paralaje efectos de desplazamiento

Ajustar ancho de fila

Después de que se diseñe la propaganda, salte a la configuración de la fila y ajuste el ancho máximo.

Ancho Máx .: 80%

divi css paralaje efectos de desplazamiento

Configuraciones de columna

Para este ejemplo, vamos a activar el efecto de desplazamiento en el nivel de columna. Esto le permite usar múltiples módulos para construir el contenido, aunque solo estamos usando un único módulo de publicidad por el momento.

Para que este efecto de desplazamiento de paralaje funcione, debemos agregar la misma imagen de fondo a la columna que utilizamos en nuestra sección. También tendremos que 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 la misma imagen de fondo con paralaje CSS.

divi css paralaje efectos de desplazamiento

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 paralaje CSS, que esencialmente corrige 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 de diseño de columna de la siguiente manera:

Acolchado: 4vw arriba, 4vw abajo
Esquinas redondeadas: 10px

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

Box Shadow: ver captura de pantalla
Posición vertical de la sombra de la caja: 0px
Caja Shadow Blur Fuerza: 36px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (desplazamiento): rgba (0,0,0,0.72)

divi css paralaje efectos de desplazamiento

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

Escala de transformación (desplazamiento): 105%

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

divi css paralaje efectos de desplazamiento

Transformar Traducir Y Eje (desplazamiento): -2.5%

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

divi css paralaje efectos de desplazamiento

Origen de la transformación: 100% 50% (centro inferior)

Esto comienza el efecto de escala desde el origen del centro inferior que, cuando se combina con el valor de traslación, se asemeja a un sutil efecto de bisagra.

divi css paralaje efectos de desplazamiento

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

divi css paralaje efectos de desplazamiento

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 de propagación y desplazamiento.

divi css paralaje efectos de desplazamiento

Resultado final

Aquí está el diseño final. Observe cómo las imágenes de fondo de paralaje están ocultas por defecto al desplazarse hacia abajo en la página. Luego aparecen cuando se cierne sobre cada una de las columnas a medida que salen. También puede ver que el paralaje todavía funciona en la columna al desplazarse hacia abajo en la página mientras se desplaza sobre la columna. Es un efecto flotante sutil, pero extremadamente único.

divi css paralaje efectos de desplazamiento

Agregar rotación al efecto de desplazamiento

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 Rotar Eje Z (al pasar el mouse): 5 grados

divi css paralaje efectos de desplazamiento

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

Aquí esta el resultado final.

divi css paralaje efectos de desplazamiento

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 por una nueva. Estoy usando el de nuestro paquete de diseño de videojuegos porque realmente resalta el efecto de aumento de paralaje de desplazamiento.

divi css paralaje efectos de desplazamiento

Actualizar configuración de fila

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

Ancho de canal: 1
Ancho: 100%
Ancho Máx .: 98%

divi css paralaje efectos de desplazamiento

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

divi css paralaje efectos de desplazamiento

Configuraciones 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".

divi css paralaje efectos de desplazamiento

Update Blurb Module

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

divi css paralaje efectos de desplazamiento

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

divi css paralaje efectos de desplazamiento

Frontera

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)

divi css paralaje efectos de desplazamiento

Efecto de cuadro Shadow Hover

Luego, déle a la propaganda una sombra de cuadro al pasar el mouse de la siguiente manera:

Box Shadow: ver captura de pantalla
Caja Shadow Blur Fuerza: 36px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (desplazamiento): rgba (0,0,0,0.7)

divi css paralaje efectos de desplazamiento

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:

Origen de transformación (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.

divi css paralaje efectos de desplazamiento

Escala de transformación (flotar): 130%

Esto ampliará la propagación y realmente aumentará la imagen de fondo de paralaje para un efecto de desplazamiento genial.

Duplicar la columna

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

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

divi css paralaje efectos de desplazamiento

Actualizar origen de transformación

Dado que todos nuestros módulos de propagación tienen el origen de transformación establecido en "centro izquierda", necesitamos ajustar esto para los desenfoques en la columna central y 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:

Origen de la transformación: 50% 50% (centro centro)

divi css paralaje efectos de desplazamiento

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

Origen de la transformación: 50% 100% (centro derecha)

divi css paralaje efectos de desplazamiento

Resultado final

Ahora mira el resultado final. Observe cómo el efecto realmente amplía la imagen de fondo de paralaje css detrás de la propaganda. Y cuando te desplazas hacia abajo mientras pasas el cursor sobre el anuncio, se parece al efecto de una lupa.

divi css paralaje efectos de desplazamiento

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

divi css paralaje efectos de desplazamiento

Pensamientos finales

Espero que los ejemplos en esta publicación hayan hecho que sus jugos creativos fluyan un poco para que pueda explorar diseños aún más geniales y efectos de desplazamiento para combinar con paralaje CSS. El proceso de configuración es realmente simple, pero las posibilidades son infinitas.

Espero tener noticias suyas en los comentarios.

¡Salud!