Cómo combinar sin esfuerzo los efectos del desplazamiento y las opciones pegajosas en su div.

Cuanto más se familiarice con la división, más se dará cuenta de cuán lejos pueden llegar las funciones construidas. A veces, pueden volverse tentadores para comenzar a combinarlos. Pero, como en el caso del diseño, la armonía debería ser una prioridad. El uso de funciones como Ejecutar efectos y opciones adhesivas funcionan mejor si no sobrecarga el diseño. Ahora, en este tutorial, utilizaremos tanto los efectos de la división como las opciones pegajosas para crear un diseño sin esfuerzo y una experiencia del usuario. Los efectos que aplicaremos se han armonizado para funcionar bien juntos y agregan el valor de diseño. ¡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!
1. Cree una estructura de diseño Agregue un nuevo fondo de gradiente antes de centrarse en los efectos y las opciones pegajosas, comenzaremos a construir el diseño. Agregue una nueva sección a la página en la que está trabajando, abra la configuración de la sección e incluya los siguientes antecedentes de gradiente:
Color 1: # 78998c
Color 2: RGBA (120.153.140,0.13)
Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición inicial: 10%
Posición final: 10%
Visibilidad Vaya a la pestaña Sección Avanzada y oculte ambos desbordamientos.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
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 en consecuencia:

Ancho: 100%
Ancho máximo: 2580 PX
Espacio agregue un borde inferior.

Margen inferior: 50 PX
Espacio de columna 2 Luego, abra la configuración de la columna 2 y aplique los siguientes valores de llenado:

Revestimiento superior: 5VH
Revestimiento inferior: 5VH
ENLIZACIÓN IZQUIERDA: 8%ENLIZACIÓN CORRECTO: 8%
Agregue un módulo de texto a la columna 1 Agregar contenido H3 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue un contenido de su elección.
Los antecedentes de gradiente incluyen el siguiente fondo de gradiente:


Color 1: RGBA (8,45,18,0.52)

Color 2: RGBA (255,255,255.0)
Tipo de gradiente: lineal
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo luego Cargue una imagen de fondo de su elección.
Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Configuración de texto H3 Cambiar a la pestaña Diseño y cambiar la configuración de texto H3 en consecuencia:
3 Fuentes de fuentes: Prata

Título 3 Estilo de fuente: mayúscula
Título 3 Alineación de texto: Centro
Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 42 PX
Rúbrica 3 altura de línea: 1.2em
Espacio Complete la configuración del módulo utilizando los siguientes valores de espaciado:
Margen superior: 20 VH

Margen inferior: 20 VH
Revestimiento superior: 48VH
Revestimiento inferior: 48 VH
Agregue el módulo de texto no. 1 En la columna 2 Agregue el contenido H4 en la columna 2. Allí, el primer módulo que necesitamos es un módulo de texto con contenido H4.
Configuración de texto H4 Cambiar a la pestaña Diseño del módulo y cambie la configuración de texto H4 de la siguiente manera:

La sección de 4 fuentes: Prata

Título 4 Estilo de fuente: mayúscula
Título 4 Color de texto: # 155100
Título 4 Dimensión de texto:
Escritorio: 45 PX
Tableta: 40 PX
Teléfono: 35 PX
Título 4 Altura de la línea: 1.3em
Agregue el módulo divisor a la visibilidad de la columna 2 Agregue un módulo Divisor justo debajo del módulo de texto y asegúrese de que se active la opción “Pantalla”.
Divisor del espectáculo: si

Línea Muévase a la pestaña Diseño del módulo y cambie el color de la línea. Línea: # E8DDC9
Dimensión luego cambie la configuración de dimensionamiento.

Peso del divisor: 5 PX

Altura: 5 PX

Agregue el módulo de texto no. 2 en la columna 2 Agregar descripción Contenido Agregue otro módulo de texto justo debajo del módulo divisor. Agregue un contenido de descripción a su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: Lato

Color de texto: # 155100

Tamano del texto:
Escritorio: 20 PX
Tableta y teléfono: 16 PX
Texto de la letra de espacio: -0.5 PX
La altura de la línea de texto: 1.8em
Dimensión Cambiamos el ancho y en la configuración del tamaño.
Ancho:
Escritorio: 72%

Tableta y teléfono: 100%
Agregue un módulo de botón a la columna 2 Agregue una copia a continuación y el último módulo que necesitamos en la columna 2 es un módulo de botón.
Botón de configuración Botón Stilet según:
Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 20 PX

El color del texto del botón: # 155100
El fondo del gradiente de botón
Color 1: RGBA (43,135.218.0)
Color 2: RGBA (224,198,159,0,48)
Posición inicial: 50%
Posición final: 50%
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Prata
El estilo de la fuente del botón: mayúscula
2. Agregue efectos adhesivos Abra la configuración de la columna 2 ahora que nuestra primera fila está en su lugar, podemos comenzar a aplicar los efectos adhesivos y corrientes. Comenzaremos con las opciones adhesivas abriendo la configuración de la columna 2.

Gire el paso de columna pegajosa a la pestaña avanzada de la columna vertebral y aplique la siguiente configuración adhesiva:
Posición pegajosa: adhiérase a la parte superior

GLIP -GLIP GRAIN HIGH: Escritorio: 50 PX

Tableta y teléfono: 80 PX
Pequeño límite inferior: fila
Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Configuración pegajosa en la columna de borde pegajoso Ahora, después de haber transformado la columna pegajosa, podemos comenzar a aplicar estilos adhesivos en la columna misma y los módulos en ella. Comenzaremos con la columna 2 yendo a la configuración del borde y aplicando el siguiente borde adhesivo:
Ancho de borde izquierdo pegajoso: 2 PX
Color del borde izquierdo: # 799A8D
Transformar la traducción Entonces, cambiaremos los valores transformados en un estado predeterminado y pegajoso.

El fondo: 10 VW
Botty Sticky: 0VW
Los módulos de texto y el botón de opacidad pegajosa cambian la opacidad y en estado predeterminado y pegajoso.

Opacidad: 0%
Opacidad pegajosa: 100%

Configuración de aterrizaje del módulo de dimensión de división Luego, abra el módulo divisor en la columna 2. Pase a la pestaña de diseño y cambie el ancho predeterminado y pegajoso en la configuración de dimensionamiento.

Ancho: 0 PX
Ancho pegajoso: 21%

Aumento de la transición y la duración de la transición en la pestaña avanzada.

Duración de transición: 800 ms
3. Agregue los efectos de desplazamiento Abra el módulo de texto en la columna 1 Además, tenemos los efectos de desarrollo. Aplicaremos estos efectos al módulo de texto en la columna 1. Comience por abrir la configuración del módulo.

Agregue el movimiento de movimiento horizontal a la pestaña avanzada y agregue la siguiente configuración de movimiento horizontal:

Active el movimiento horizontal: sí
Comenzando el desplazamiento: -5

GAPACIÓN PROMEDIA: 0 (al 72%)

Grado final: 0
Agregue un efecto de desfile en el desvanecimiento de entrada y salida Complete los efectos de desplazamiento aplicando la siguiente configuración de decoloración y salida al mismo módulo: Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 0% (al 46%)
Opacidad final: 100% (al 52%)

4. Reutilice el clon de fila el giro tantas veces como desee ahora que tanto los efectos de la carrera como las opciones pegajosas están en su lugar, podemos reutilizar toda la fila tantas veces como queramos, clonándolo.
Cambie el contenido duplicado Asegúrese de cambiar todo el contenido duplicado, etc.
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 los efectos de desplazamiento de DIV y con opciones pegajosas. Específicamente, le mostré cómo equilibrar ambos efectos en un diseño elegante. Esto ha llevado a una hermosa experiencia de desplazamiento en todo el tamaño de la pantalla. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, asegúrese de 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.