homefinance blog
Si está buscando una manera de crear animaciones fluidas con los efectos de contaminación incrustados, le gustará esta publicación. Le mostraremos cómo combinar los efectos de desplazamiento del movimiento incrustado de Divi para crear secciones de altura completas que puede ejecutar a la vez. Comenzaremos creando la primera sección. Luego, reutilizaremos esa sección a lo largo del diseño de nuestra página. Para activar el desfile, utilizaremos las propiedades Snap de CSS que atribuiremos a las secciones de nuestra página, HTML, encabezado y sótano. ¡Podrá descargar el archivo de página 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 diseño de animaciones suaves de forma gratuita para poner su mano en el aspecto de esmalte 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 nueva página y comience a diseñar la primera sección Agregue una nueva página y cambie a Visual Builder Iniciar agregando una nueva página. Ingrese el título de la página, publique la página y cambie a Visual Builder.
Configuración de la sección de dimensión Una vez que llegue a la nueva página, abra la sección que ya existe y cambie la configuración de tamaño.
Altura mínima: 100 VH
El elemento principal agrega dos líneas de código CSS a la sección. Estas líneas de código CSS nos ayudarán a convertir la sección en un punto de fijación para corregir el desfile. Scroll-snap-asign: inicio;
Scroll-snap-stop: normal;
Visibilidad Para garantizar que nada exceda el contenedor de la sección, ocultaremos el derrame de la sección.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie el tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%espaciado, eliminamos el revestimiento predeterminado e inferior de la sección.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Posición y reposicionaremos la fila en consecuencia:
Posición: Absoluto
Ubicación: el centro inferior
Agregue un módulo de texto a la columna Deje el cuadro de contenido vacío La única forma en que necesitamos en esta fila es un módulo de texto. Asegúrese de dejar el cuadro de contenido del módulo vacío.
Color de fondo y luego cambia el color de fondo.
Color de fondo: # FFEE00
La configuración de texto también eliminará la altura de la línea de texto del módulo.
La altura de la línea de texto: 1em
Dimensión Entonces, iremos a la configuración del tamaño y cambiaremos el ancho.
Ancho: 30%
Espacio convertiremos el módulo en un cuadrado agregando un poco de relleno superior.
Revestimiento superior: 30%
Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Use la siguiente estructura de columna:
Dimensión sin agregar módulos, abrir la configuración de la fila y modificar la configuración de tamaño en la pestaña de diseño:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 60 VW
Ancho máximo: 100%
Espacio Agregue algunos bordes superiores personalizados en diferentes tamaños de pantalla a continuación.
Margen superior: 20VH (escritorio), 5VW (tableta y teléfono)
Espacio de la columna 2 Luego, abriremos la configuración de la columna 2 y agregaremos algunos valores de llenado personalizados.
Revelaje superior: 2 VH (tableta y teléfono)
Junta izquierda: 2VW
Junta derecha: 2VW
Agregue el módulo de imagen a la columna 1 Cargue la imagen es hora de agregar módulos, agregue un módulo de imagen a la columna 1 y cargue una imagen de su elección.
Dimensión forzaremos el ancho completo en el siguiente módulo. Fulfets el ancho completo: Sí
Agregue el módulo de texto no. 1 En la columna 2 Agregue el contenido H2 en la segunda columna, el primer módulo que necesitamos es un módulo de texto con un contenido H2.
Configuración de texto H2 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:
2 Sección de fuentes: Anton
Título 2 Dimensión de texto: 5VW (escritorio), 7VW (tableta), 9VW (teléfono)
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto justo debajo de la derecha debajo del anterior e ingrese un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: Abrir sans
Tamaño de texto: 0.8VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
La altura de la línea de texto: 1.8em
Espacio y agregue algunos bordes personalizados e inferiores a la configuración de espaciado.
Margen superior: 2VW
Margen inferior: 2 VW
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 esta columna es un módulo de botón. Agregue una copia de su elección.
Botón de configuración Botón Stilet según:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
El color del texto del botón: # 333333
Botón de color del borde: # 333333
Botón Raza: 1 PX
Botón de fuente: Anton
El estilo de la fuente del botón: mayúscula
Espacio y complete la configuración del módulo agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Revelaje izquierdo: 3VW (escritorio), 5VW (tableta), 7VW (teléfono) Reinicio recto: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
2. Agregue los efectos de despliegue al modo de texto de diferentes elementos en el movimiento vertical de la fila # 1 Una vez que todos los elementos están en su lugar, es hora de agregar los efectos de desplazamiento. Abra primero el módulo de texto y use un movimiento vertical.
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: 4
Brecha promedio: 0
Grado final: -4
El desencadenante del efecto de movimiento: el medio del elemento
Fila # 2 columna 1 movimiento horizontal y luego abra la primera columna de la segunda fila y agregue un movimiento horizontal.
Active el movimiento horizontal: sí
Comenzando el desplazamiento: -3
GAPACIÓN PROMEDIA: 0 (del 40% al 60%)
Grado final: -3
El desencadenante del efecto de movimiento: el medio del elemento
Desvanecido dentro y fuera, también aplicamos un desenfoque y en la misma columna.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 100%
Opacidad final: 100%
El desencadenante del efecto de movimiento: el medio del elemento
Columna 2 Movimiento horizontal Entonces, abriremos la configuración de la segunda columna y aplicaremos la siguiente configuración de movimiento horizontal:
Active el movimiento horizontal: sí
Compensación de inicio: 3
GAPACIÓN PROMEDIA: 0 (del 40% al 60%)
Compensación final: 3
El desencadenante del efecto de movimiento: el medio del elemento
Desventirse dentro y fuera junto con un efecto de decoloración dentro y fuera.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 100%
Opacidad final: 100%
El desencadenante del efecto de movimiento: el medio del elemento
4. Reutilice el clon de la primera sección La sección cuatro veces después de haber completado la primera sección y sus efectos, puede clonarlo con la frecuencia que desee. Cambiar los colores de fondo de cualquier otra sección. Cambiaremos el color de fondo de cualquier otra sección .
Color de fondo: # 111111
5. Agregue el código CSS para activar el snpPing de desplazamiento en la página HTML Agregue el módulo de código a la última sección en la página ahora, para activar la página HTML, agregaremos un módulo de código en cualquier lugar en la última sección de nuestra página.
Ingrese el código CSS HTML Estas líneas de código CSS nos ayudarán a aplicar el desfile a nuestra página HTML:
html {
Overflow-x: oculto;
Scroll-snap-type: y proximidad;
}
Agregue Scroll Snapping Comience al encabezado y el pie de página Nos aseguraremos de que nuestro encabezado y el sótano también sean puntos de desplazamiento (como son nuestras secciones) agregando las siguientes líneas de código CSS: encabezado, pie de página {
Scroll-snap-asign: inicio;
}
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
