Cómo crear un intercambio de imágenes en el pergamino con la división

Crear diseño interactivo tiene muchas ventajas. Uno de ellos es que puede agregar más contenido visual a una sola sección y determinar cómo aparece el contenido visual mientras los visitantes se ejecutan. Aumenta la experiencia general de los usuarios que los visitantes tienen en su sitio web y dirigen sus esfuerzos de diseño web al siguiente nivel. En el tutorial de hoy, le mostraremos cómo crear un intercambio de imágenes en el pergamino utilizando los nuevos efectos de desplazamiento. Veremos un cambio entre cuatro imágenes diferentes. ¡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 la imagen de intercambio gratuita en el diseño del efecto de desplazamiento para poner sus manos en el intercambio de imágenes en el efecto de apariencia, primero debe descargarla 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 la estructura del elemento Agregue una nueva sección regular Comience agregando una nueva sección habitual a la página en la que está trabajando.
Agregue una nueva estructura de columna de fila Continúe 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 fila de la siguiente manera:

Ancho: 100%
Ancho máximo: 100%
Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y cambie los valores de espaciado en diferentes tamaños de pantalla.

Revestimiento superior: 50 PX (escritorio), 0 PX (tableta y teléfono)
Bajo forro: 50 PX (escritorio), 120% (tableta), 140% (teléfono)
Configuración de la columna 2 espaciado Agregue un poco de relleno a la segunda columna.

Revestimiento superior: 12VW
Revestimiento inferior: 12VW
ENLIZACIÓN IZQUIERDA: 5VW
Junta derecha: 5VW
Agregue el módulo de imagen a las imágenes de carga de la columna 1 con fondo transparente es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Cargue una imagen del producto con una relación 1: 1 y un fondo transparente.

Color de fondo Entonces, acceda a la configuración de fondo y cambie el color de fondo. Fondo de pantalla: # B3485E

Dimensión Active la opción “Fuerza de ancho completo” en la siguiente configuración de tamaño.
Fuerza el ancho completo: si

Espacio y complete la configuración del módulo agregando un poco de revestimiento superior e inferior.
Revestimiento superior: 100 px

Finamiento inferior: 100 PX
Clone El módulo de imagen 3x Después de haber completado el primer módulo de imagen en la columna 1, puede clonar todo el módulo tres veces.
Cambie las imágenes Cambie la imagen de cada módulo de imagen duplicada.

Cambie los colores de fondo y coincida con las nuevas imágenes con los colores de fondo de su elección.

El color del fondo 1: # ffda60

El color del fondo 2: # E6674D
Color de fondo 3: # B4FF99
Agregue el módulo de texto no. 1 en la columna 2 Agregue el contenido H2 a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto que contiene 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

Rúbrica 2 Color de texto: # 000000
Título 2 Dimensión de texto: 4VW (escritorio), 8VW (tableta), 10VW (teléfono)
Título 2 Altura de la línea: 1.4em
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto justo debajo del anterior e ingrese el contenido de descripción de su elección.
Configuración de texto Vaya a la pestaña Diseño y realice algunos cambios en la configuración de texto.

Texto de fuente: Abrir sans

Tamaño de texto: 0.9VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
Altura de la línea de texto: 2.6em
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. Ingrese una copia de su elección. Establece el botón Luego, estilice el botón en consecuencia:
Use estilos personalizados para el botón: Sí

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

El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Anton
Espaciado Agregue algunos valores de llenado personalizados a la configuración de espaciado.
Revestimiento superior: 50 px

Revestimiento inferior: 50 PX

Levante izquierdo: 33 PX
Revestimiento derecho: 33 PX
2. Aplicar efectos en las imágenes Módulo de imagen no. 1 Divido dentro y fuera después de haber completado los módulos en ambas columnas, es hora de aplicar los efectos. Los efectos de rendimiento que agregamos son diferentes para cada uno de los cuatro módulos de imagen en la columna 1. Establecimos la configuración para que una imagen aparezca después de la otra. Abra el primer módulo de imagen y use el siguiente efecto de contaminación interior y fuera:
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100%

Opacidad promedio: 100% (de 0% a 39%)
Opacidad final: 0% (al 40%)
El desencadenante del efecto de movimiento: el medio del elemento
Módulo de imagen no. 2 decoloración dentro y fuera, luego abra la segunda imagen y use la configuración de decoloración dentro y fuera:
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0% (al 40%)

Opacidad promedio: 100% (del 40% al 49%)
Opacidad final: 0% (a 50%)
El desencadenante del efecto de movimiento: el medio del elemento
Módulo de imagen no. 3 decoloración interior y exterior Agregue un efecto de decoloración en y el tercer módulo de imagen. Cactivate Desvinte dentro y fuera: Sí
Opacidad inicial: 0% (a 50%)
Opacidad promedio: 100% (de 50% a 59%)

Opacidad final: 0% (al 60%)
El desencadenante del efecto de movimiento: el medio del elemento
Módulo de imagen no. 4 decoloración dentro y fuera y complete los efectos de desarrollo agregando el siguiente efecto de decoloración en y en el último módulo de imagen en su columna:
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0% (al 60%)
Opacidad promedio: 100% (del 60% al 100%)

Opacidad final: 100%
3. Agregue la configuración de posición a la primera imagen y extienda a todas las imágenes de la columna Agregue la posición absoluta al módulo de imagen no. 1 Ahora, para garantizar que las imágenes aparezcan una tras otra mientras se ejecutan, tendremos que colocar los módulos de imagen uno encima del otro utilizando las opciones de posición de la Divic. Abra el primer módulo de imagen, acceda a la pestaña avanzada y use una posición absoluta.
Posición: Absoluto
Ubicación: superior izquierda
Extienda la configuración de posición a todas las imágenes de la columna Continúe expandiendo los estilos de posición a cada módulo de imagen y ¡termine!

A: todas las imágenes
A lo largo: esta columna
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