Cómo crear transiciones de copia paralelas a las opciones pegajosas de Div

Al buscar formas creativas de darle vida al diseño de su página, los efectos de paralaje pueden ser útiles. Traigo esa interacción adicional en el pergamino sin ser demasiado invasivo. Si está buscando una manera de expandir ese efecto de paralaje a varias secciones en su página, le gustará este tutorial. Hoy, le mostraremos cómo crear transiciones de copia en paralelo con las opciones pegajosas de Div. Tan pronto como los visitantes pasan por una determinada sección, la copia se ejecuta con la imagen de fondo de Paralax, que ofrece un efecto muy limpio. Tan pronto como se alcanza la siguiente sección de la línea, la copia se reemplaza con otro título. ¡El resultado que buscamos se ve bien en todos los tamaños de pantalla y podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
https://youtu.be/uzcd0__apjk Suscríbase a nuestro canal de YouTube 1. Cree la estructura del elemento Agregue una nueva sección Inicio agregando una nueva sección a la página a la que trabaja. Este efecto funcionará especialmente bien si tiene contenido por encima y por debajo del aspecto que vamos a crear.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
La imagen de fondo de la columna ahora, después de cambiar la configuración general de la fila, aplicaremos algunas configuraciones personalizadas a la columna. Comience abriendo la configuración de la columna.

Cargue una imagen de fondo y active un efecto de paralaje en ella.

Use el efecto de paralaje: sí
Método de paralaje: CSS
Espacio de España Entonces, acceda a la pestaña de diseño y aplique un relleno personalizado desde abajo. Auriculares inferiores: 50 VH

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H2 Le recomiendo que agregue módulos, comenzando con un módulo de texto que contiene un contenido H2.
Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Montserrat

Título 2 Fuente de peso: Bold
Título 2 Estilo de fuente: mayúscula
Rúbrica 2 color de texto: #ffffff
Rúbrica 2 Dimensión de texto:
Escritorio: 9VW
Tableta: 14 VW
Teléfono: 15VW
Los filtros también activan un modo de mezcla en la configuración del filtro.
Modo de mezcla: superposición


Agregue el módulo de botón a la columna 1 Agregue una copia y el último módulo que necesitamos en esta columna es un módulo de botón. Agregue una copia de su elección.
Agregue un enlace y luego ingrese un enlace.

Botón de configuración Luego, cambie a la pestaña Diseño del módulo y modifique correctamente la configuración del botón:

Use estilos personalizados para el botón: Sí

Botón Tamaño de texto:
Escritorio: 2VW
Tableta y teléfono: 7VW
El color del texto del botón: #ffffff
El ancho del nudo del botón: 0 PX
Distancia entre letras y botones: 0.06VW
Botón de fuente: Karla
Muestra el icono del botón: Sí

Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no
Espacio agregue un relleno personalizado, superior e inferior.
Revestimiento superior: 8%

Finamiento inferior: 8%
Posición y complete la configuración del módulo reposicionando el módulo en la esquina inferior derecha de la columna.
Posición: Absoluto

Ubicación: en el lado inferior derecho
2. Los pasos necesarios para el efecto devuelven el módulo de texto pegajoso ahora, que hemos establecido la base de nuestro diseño con todos los elementos necesarios, es hora de permitir la transición en paralelo. Para hacer esto, utilizaremos las opciones adhesivas construidas del DIV en el módulo de texto. Abra la configuración del módulo, vaya a la pestaña avanzada y aplique la siguiente configuración adhesiva: Posición pegajosa: Stick desde arriba
Gap Upper Lipy: 150 PX

Pequeño límite inferior: sección
Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Cambie el espacio de módulo de Mod predeterminado ahora que hemos activado las opciones adhesivas en este módulo, podemos aplicar estilos adhesivos. Por defecto, el módulo se colocará sobre la columna. Y debido al color del texto blanco del módulo, se mezclará con el color de fondo de la sección y hará que parezca que no hay texto en absoluto. Para crear esta posición, usaremos un margen superior negativo en diferentes tamaños de pantalla.
Margen superior:
Escritorio: -10VW

Tableta: -14VW
Teléfono: -15VW
Sticky Una vez que el módulo de texto está envuelto, queremos volver a la vista. Para asegurarnos de que esto suceda, llevaremos este margen superior a “0VH” a un estado pegajoso.
Margen superior brillante: 0 VH
El espacio de la sección también necesitaremos espacio en la parte superior e inferior de nuestra sección, para que el módulo de fondo y texto pueda fusionarse en colores. Para hacer esto, abriremos la configuración de la sección nuevamente y aplicaremos algunos rellenos superior e inferior personalizados.

Revestimiento superior: 10 VH
Revestimiento inferior: 10 VH

Clon toda la sección tantas veces como desee después de haber completado el diseño de la sección, puede clonarlo con la frecuencia que desee. Cambie el contenido y los enlaces para cambiar los contenidos y los enlaces para cada módulo en las secciones duplicadas y ha terminado !
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, te mostré cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo crear transiciones de copia de paralaje que le permitan expandir el efecto de paralaje en varias secciones en su página. ¡Puede descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.