Cómo combinar animaciones y paralax en divi para patrones únicos

Ya sea que preparemos una comida o diseñemos un sitio web, los ingredientes no garantizarán un plato sabroso o un sitio hermoso. Qué tan bien combinamos estos elementos juntos marcan la diferencia. En este tutorial, le mostraré cómo combinar la animación y el parallex de la imagen de una manera que probablemente no haya considerado hasta ahora. Si aún no lo sabe, la animación es una función de división construida que se puede agregar a cualquier elemento de división al cargar la página. Parallax también es una opción de división que le permite agregar un movimiento único a las imágenes de fondo en el desplazamiento. Hoy, utilizaremos la configuración de diseño integrado de la división para combinar las animaciones y la paralaxis en todo tipo de modos creativos. La combinación funciona en junta la magia lo suficiente como para crear una hermosa apariencia de imágenes animadas de paralaje que se ven muy bien mientras ejecuta la página.
¡Vamos a empezar! Tirar del ojo



Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, 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!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás tener lo siguiente:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Imágenes para ser utilizadas para contenido falso. Puede encontrar las imágenes utilizadas para este Tutorial en Life Coach Div Layout Pack.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
La idea básica de la idea básica detrás de este concepto de diseño se centra en usar el CSS paralelo en imágenes de fondo. Debido a la forma en que funciona el CSS de Paralaxa, la imagen Paralax permanecerá fija y llenará automáticamente la ventana del navegador, independientemente del tamaño del artículo que lo use. La naturaleza fija de la imagen le permite usar la misma imagen de Paralax en varios elementos de la división y luego mover esos elementos usando la animación. Cuando se instala la animación, las imágenes de fondo de Paralax utilizadas se ajustarán y funcionarán como se esperaba cuando se agote. Dos columnas (1/2 1/2).
Antes de agregar nuestros módulos, haga algunos ajustes a la sección y la fila. Actualice la configuración de la sección y las filas primero, abra la configuración de la sección y elimine el relleno predeterminado de la siguiente manera: Reinicio: 0 PX hacia arriba, 0 PX hacia abajo

Luego abra la configuración de la fila y le dé a la fila una imagen de fondo de Paralax. Imagen de fondo: [cargar la imagen] Use el efecto de paralaje: Sí, el método de paralaje: CSS aquí el método Paralax debe establecerse en CSS para que el diseño funcione.

Ancho: 100% Máximo Ancho: 100% revestimiento: 10 VW hacia arriba, 10 VW a la izquierda, 10 VW a la derecha

Agregue el módulo de texto con el fondo de los paralelos correctos ahora estamos listos para comenzar a agregar nuestros módulos de texto al diseño. El primer módulo de texto es la clave de este diseño. Al aplicar exactamente la misma imagen de fondo y el CSS paralelo al módulo de texto, podemos ser creativos con la animación para un efecto completamente único. Continúe y agregue un nuevo módulo de texto en la columna 1.
Luego actualice la configuración del módulo de texto de la siguiente manera: Contenido del cuerpo:
¡Hola!
Soy Jane …

sobre mí

Luego, le dé al texto la misma imagen de fondo CSS Paralax que agregó en una fila. Imagen de fondo: [Imagen de carga] Use el efecto de paralaje: sí método de paralaje: CSS
Fuente Texto: Fira Sans Peso del texto Fuente: Easy Texto Color: #FFFFFF Tamaño Texto: 70 PX Altura de texto: 1em

Estilo de fuente de enlace: Color subrayado (U) del texto del enlace: #FFFFFF (predeterminado), # 881E67 (pasaje) Enlace de texto: 30 PX Letra de espaciado Enlace: 2 PX

Revestimiento: 20% más, 20% de baja, 10% izquierda, 10% ancho del borde derecho: 20 px borde de color: #ffffff

Luego agregue la siguiente animación al módulo de texto: Estilo de animación: Dirección de diapositivas de la animación: Duración de animación correcta: 1500 ms Intensidad Animación: 80% Opacidad inicial: 20%

Revisemos el efecto hasta ahora …

Observe cómo la imagen de fondo del módulo de texto animado se basa en la ubicación correcta del fondo de fila. Esto se debe al hecho de que ambos comparten la misma imagen de fondo con el efecto CSS Paralax. Agregar el segundo módulo de texto con una verdadera imagen de fondo de Palallax en este momento estamos listos para agregar nuestro próximo módulo de texto. La siguiente tendrá una imagen de fondo diferente utilizando el verdadero efecto de paralaje. Les daremos algo de animación.


Agregue un nuevo módulo de texto en la columna 2.

Luego actualice el contenido del cuerpo con la palabra “mi blog”.
Luego agregue una imagen de fondo con el método True Paralax. Imagen de fondo: [Imagen de carga] Use el efecto de paralaje: Sí Método de paralaje: Paralaje Verdadero Texto: FIRA Estilo de texto Texto: TT Alineación del texto Texto: Color central del texto: #FFFFFFF SPATUE Letter Texto: 10 PX Ancho: 320 PX Ancho máximo: 320 PX Alineación del módulo: Centro

Marja: (Escritorio): -5VW arriba, margen de abajo de 4 VW (tableta y teléfono): 3VW Finización superior: 70 PX hacia arriba, 70 px abajo

Ancho óseo: 20 PX Color Edge: #ffffff

Estilo de animación: Dirección de diapositivas de la animación: Delebre de abajo Animación: 200 ms

Creando el tercer módulo de texto con una nueva imagen de fondo de Prallax Para crear el tercer módulo de texto, copie el módulo de texto que acaba de crear en la columna 2.

Luego mantendremos la imagen de fondo también, pero actualizaremos el efecto de paralaje con el método CSS Paralax.
Ancho: 240 PX Máximo Ancho: 240 PX Alineación del módulo: Margen izquierdo: 0 PX debajo de la revestimiento: 170 px Top, 170 px hacia abajo, 95 px izquierda, 95 px El ancho derecho y el revestimiento derecho se usan para crear visualización vertical del texto, que coincide con el diseño del módulo más largo.

Luego actualice la dirección de la animación hacia arriba en lugar de la parte inferior. Dirección de la animación: arriba

Resultado final ahora, verifiquemos el resultado final.

Parte 2: Creación de la animación y el diseño de Parallax (Versión 2) Este próximo proyecto agregará una animación única cargando el fondo de Paralax para una fila después de la animación inicial de los módulos. Para hacer esto, necesitaremos usar una fila estrictamente separada para el fondo CSS Paralax que se moverá detrás del contenido. Y dado que tendremos el fondo de la sección inicialmente expuesta, podemos agregar un color de fondo personalizado para nuestro contenido antes de la animación de la fila. Aquí le mostramos cómo hacerlo. Primero, implementa el modo de vista de estructura alambre. Luego copie la fila que contiene sus módulos de texto. Ahora tendrás dos líneas idénticas. Luego elimine los módulos de texto de la fila superior. Todo lo que realmente queríamos hacer era comenzar con el proyecto de nuestra fila desde arriba. Luego, actualice la configuración para la fila superior, de la siguiente manera: Altura: 900 PX (Escritorio), 2000 PX (tableta y teléfono): 0 PX arriba, 0 PX Down Animation Style: Dirección de la animación: Duración de animación correcta: 1250 ms Retraso de animación: 1800 ms

Ofrecemos a la fila una altura establecida, porque la fila vacía no tendrá una altura predeterminada. Por lo tanto, debe asegurarse de que la altura de la fila sea suficiente para cubrir el contenido de la segunda fila con el contenido. También ofrecí el giro una animación con un retraso, a fin de deslizar detrás del contenido después de los módulos de texto. La superposición de las dos líneas ahora todo lo que tenemos que hacer es traer la fila inferior hacia arriba, usando el margen negativo, para que la fila superior se superponga con nuestra animación de fondo. Abra la configuración para la fila inferior y actualice el margen de la siguiente manera: El margen: -900px Top (escritorio), -2000px (tableta y teléfono) luego retire la imagen de fondo con el método CSS Paralax, porque usaremos la imagen de fondo de la fila superior.

Aquí está el diseño hasta ahora. Tenga en cuenta primero la animación de fondo retrasada y cómo el fondo de paralax para el módulo de texto en la columna 1 se ajusta perfectamente a él. Agregar un color de fondo de la sección para dar a los módulos de texto un fondo inicial antes de la animación de la fila, puede dar un color de fondo a la sección. Abra la configuración de la sección y agregue lo siguiente: Color izquierdo del gradiente de fondo: RGBA (136,30,10,61) Color derecho del gradiente de fondo: # 881E67 Tipo de gradiente: Radial

Resultado final ahora, verifiquemos el resultado final.

Combo Modo de combinación opcional y animación también, puede ser aún más creativo agregando un modo de mezcla de segunda energía y agregando una animación de zoom que funcionará en conjunto con las animaciones del módulo. Modo de mezcla: brillo de brillo: zoom

Aquí esta el resultado final.

Pensamientos finales Espero que hayas aprendido algunas cosas, ya que hemos explorado algunas formas únicas de combinar la animación y las imágenes de paralaje.Los resultados son ciertamente únicos y están seguros de que puede cambiar fácilmente esta configuración para construir innumerables otras combinaciones que se verán increíbles en su próximo proyecto.Espero tener noticias suyas en los comentarios.¡Suerte!