Cómo combinar efectos de desplazamiento con fondos CSS Parallax en Divi
Publicado: 2019-08-30El 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 al combinar el 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 de desplazamiento de fondo de paralaje CSS únicos en Divi. ¡No se necesitan complementos ni codificación personalizada!
Empecemos.
Vistazo
Aquí hay un vistazo rápido a los efectos de desplazamiento de fondo de paralaje css que diseñaremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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á lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado
Después de eso, tendrá 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 paralaje.
Asegúrese 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 superior, 10vw inferior
Agregar un módulo Blurb
Una vez que el fondo y el relleno de la sección estén en su lugar, agregue un módulo de propaganda a la fila.
Luego, actualice el contenido de la propaganda con algunas oraciones del texto del cuerpo. 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 fuente del icono: 50px
Alineación de texto: centro
Fuente del título: Oswald
Estilo de fuente del título TT
Color del texto del título: #ffffff
Espaciado de letras de título: 2px
Fuente del cuerpo: Nunito
Color del texto del cuerpo: #ffffff
Espaciado entre letras del cuerpo: 1 px
Relleno: 30 píxeles en la parte superior, 30 píxeles en la parte inferior, 30 píxeles a la izquierda, 30 píxeles a la derecha
Ajustar el ancho de la fila
Una vez diseñada la propaganda, salte 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 hover a nivel de columna. Esto le permite usar múltiples módulos para construir el contenido, aunque solo estamos usando un solo módulo de propaganda por ahora.
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 la misma imagen de fondo usando CSS paralaje.
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 fija la imagen en el mismo lugar exacto 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 superior, 4vw inferior
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 del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 36px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (flotar): 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:
Transformar escala (flotar): 105%
Esto ampliará ligeramente la columna (y su contenido) para crear el efecto de salirse ligeramente de la imagen de fondo.
Transformar el eje Y de traslación (desplazamiento): -2,5%
Esto mueve la columna ligeramente hacia arriba al pasar el mouse para crear un ligero desplazamiento asimétrico.
Transformar el origen: 100% 50% (centro inferior)
Esto inicia el efecto de escala desde el origen del centro inferior que, cuando se combina con el valor de conversión, se asemeja a un efecto de bisagra sutil.
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 la misma propaganda y efectos de desplazamiento en su lugar.
Resultado final
Aquí está el diseño final. Observe cómo las imágenes de fondo de paralaje se ocultan de forma predeterminada cuando se desplaza hacia abajo en la página. Luego aparecen al pasar el cursor sobre cada una de las columnas a medida que salen. También puede ver que el paralaje sigue funcionando 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 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 Girar eje Z (en vuelo estacionario): 5 grados
Si desea mezclarlo, puede darle a la columna del medio 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: Creación de un efecto de desplazamiento de paralaje con 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 desplazamiento de paralaje de aumento.
Actualizar la configuración de la fila
Vamos a necesitar algo de espacio adicional para este diseño, así que abra la configuración de la fila y actualice lo siguiente:
Ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 98%
Después de eso, salte a la pestaña de contenido y elimine 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 hacerlo, haga clic con el botón derecho en el elemento de la columna y seleccione "restablecer estilos de elemento".
Actualizar módulo Blurb
Después de que la configuración de la columna se restaure a los estilos predeterminados, abra la configuración del módulo de propaganda y agregue la misma imagen de fondo de paralaje css 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: 300px
Alineación del módulo: centro
Alto: 300px
Frontera
Para completar el efecto circular, necesitamos actualizar las esquinas redondeadas y darle un ligero borde.
Esquinas redondeadas: 50%
Ancho del borde: 1 px
Color del borde: rgba (255,255,255,0.12)
Efecto de desplazamiento de sombra de caja
Luego, dale a la propaganda una sombra de cuadro al pasar el mouse de la siguiente manera:
Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 36px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (flotar): rgba (0,0,0,0.7)
Transformar efectos de desplazamiento
Una vez que su caja 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.
Transformar escala (flotar): 130%
Esto ampliará la propaganda y realmente ampliará la imagen de fondo de paralaje para un efecto de desplazamiento genial.
Duplica la columna
Una vez terminada la propaganda, 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 propaganda tienen el origen de transformación establecido en "centro izquierda", necesitamos ajustar esto para las manchas en el centro y la columna derecha para que escalen desde la posición apropiada.
Abra la configuración del módulo de propaganda en la columna 2 y actualice lo siguiente:
Transformar el origen: 50% 50% (centro centro)
Luego, abra la configuración del módulo de propaganda en la columna 3 y actualice lo siguiente:
Transformar el 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 propaganda, se parece al efecto de una lupa.
De hecho, esto es tan genial que podríamos querer dejarlo como el estilo predeterminado en lugar de solo en el estado de desplazamiento.
Pensamientos finales
Espero que los ejemplos de esta publicación hayan hecho que su creatividad fluya un poco para que pueda explorar diseños aún más geniales y efectos de desplazamiento para combinar con css paralaje. El proceso de configuración es realmente simple, pero las posibilidades son aparentemente infinitas.
Espero tener noticias tuyas en los comentarios.
¡Salud!