homefinance blog
Se deben mostrar muchos sitios web antes y después de imágenes por varias razones. Por ejemplo, las compañías de diseño web pueden mostrar las imágenes de antes y después de los sitios que han construido, y los sitios de acondicionamiento físico pueden mostrar antes y después de los retratos de sus clientes exitosos (y ajustados). Por lo general, los sitios web están satisfechos con un diseño simple que muestra cada foto uno al lado del otro. En este tutorial, mejoraremos este diseño tradicional con animación interactiva. En este tutorial, mostraremos cómo crear desplazamiento animado antes y después de imágenes en la división. Con este diseño, el usuario verá la transición de imágenes antes y después de ejecutar la página. Esta es una excelente manera de atraer a los usuarios a ejecutar en su sitio y ver la transformación de una manera única. Además, podemos construir esto utilizando solo las opciones integradas del Div. ¡No se necesita código o complemento personalizado!
Vamos a empezar. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. 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 aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de imágenes animadas de desplazamiento antes y después en el Divo Ahora estamos listos para comenzar a crear nuestro desplazamiento animado antes y después de las imágenes en la división. Para hacer esto, primero tendremos que crear una fila de dos columnas que no se envolverán (o se rompan) en el dispositivo móvil. Cada una de las columnas también tendrá que tener adelantamiento oculto, de modo que las imágenes anteriores y postales se deslicen afuera y ver en cada columna en el pergamino. Una vez que las columnas estén en su lugar, agregaremos nuestras imágenes a cada columna y agregaremos el estilo y la animación del desfile horizontal a cada uno. Una vez que esto esté en su lugar, agregaremos el texto antes y después del título por encima de las imágenes. Parte 1: Creando la fila con dos columnas para comenzar, agregue una fila con dos columnas a la sección predeterminada habitual usando el Builder Div.
Configuración de fila Abra la configuración de la fila y actualice lo siguiente:
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 900 PX (escritorio), 700 PX (tableta), 300 PX (teléfono)
Forro: 0 px arriba, 0 px abajo
Nota: La configuración del ancho de fila máximo utilizando unidades de longitud de píxeles es crucial para que este diseño funcione. Recuerde estos valores, porque el ancho de cada imagen y la animación del desfile horizontal que agregaremos más tarde dependerá del ancho máximo de la fila.
Para asegurarse de que las columnas no se envuelvan ni se dividan en una apariencia con una columna móvil, abra la pestaña avanzada y agregue los siguientes CSS personalizados al elemento principal: Display: Flex;
Flex-Wrap: Nowrap;
Configuración de la columna luego abra la configuración de la columna 1 y actualice la configuración de diseño de la siguiente manera:
Junta: 5VW hacia arriba, 5 VW inferior del borde recto: 2 PX
Color de borde derecho: # 666666
En la pestaña Avanzada, actualice la superación de la siguiente manera:
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Recuerde, cada una de las columnas tendrá que tener un adelantamiento oculto para que las imágenes anteriores y postales se deslicen y se vean dentro de cada columna en el desplazamiento.
Luego abra la configuración de la columna 2 y actualice la configuración de diseño de la siguiente manera:
Junta: 5VW arriba, 5VW abajo
Ancho del borde izquierdo: 2 PX
Color del borde izquierdo: # 666666
Nota: El borde derecho e izquierdo en cada columna crea la línea media que será el punto central de la transición de la imagen antes y después.
Luego actualice el derrame para esconderse y para esta columna.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Parte 2: Creación de las imágenes antes y después de nuestra aparición con dos columnas, ahora podemos agregar las imágenes que usaremos para la animación antes y después. De hecho, tendremos tres imágenes en total. En la columna 1, tendremos una versión de “sombra” de la imagen anterior que permanece en la parte posterior (no animada) y tendremos la imagen anterior (en blanco y negro) que eventualmente se moverá hacia la derecha en el desplazamiento. En la columna 2 tendremos la imagen después de lo cual se ejecutará en la visualización izquierda en el desplazamiento.
Agregando las tres imágenes para crear la primera imagen, agregue un nuevo módulo de imagen en la columna 1.
Luego suba una imagen en el modo.
En la pestaña Diseño, actualice las siguientes opciones de ancho:
Ancho: 100%
Ancho máximo: 448 PX (escritorio), 348 PX (tableta), 148 PX (teléfono)
Nota: Cada una de las dimensiones del ancho máximo se determina exactamente la mitad de la fila menos el borde de 2 px. Entonces, para el escritorio, la fila tiene un ancho máximo de 900 px. La mitad de la fila es de 450 px. Luego retire el 2px agregado por el borde y obtendrá 448px. Para crear las siguientes dos imágenes, copie el módulo de imagen tres veces.
Luego mueva una de las imágenes en la columna 2.
Parte 3: Agregar el estilo personalizado y la animación de animación a las imágenes antes del estilo de “sombra” de imagen para enfatizar la imagen anterior de “sombra”, abra la configuración para la primera (o parte superior) de la imagen 1 y actualice la opción de filtro como sigue.:
Saturación: 0%
Opacidad: 10%
Para garantizar que la imagen de la sombra se coloque directamente detrás de la imagen anterior, actualice la posición de la imagen de la siguiente manera:
Posición: Absoluto
Brecha vertical: 5VW
Nota: El vacío vertical debe ser igual al relleno superior de la columna vertebral para que las imágenes permanezcan alineadas verticalmente.
Antes de la configuración elegante de la imagen, abra la configuración de la segunda imagen en la columna 1 (ahora colocada sobre la imagen de la sombra) y actualice el filtro de saturación para hacer una versión en blanco y negro de la imagen de la siguiente manera:
Saturación: 0%
En la pestaña avanzada, seleccione la pestaña de movimiento horizontal bajo los efectos de transformación de contaminación y active el movimiento horizontal. Luego actualice lo siguiente: configure el movimiento horizontal para el escritorio …
Comenzando el desplazamiento: 0 (al 30%)
GABE ADRIO: 2.26 (al 45%)
Compensación final: 4.52 (al 60%)
Establezca el movimiento horizontal para la tableta …
Comenzando el desplazamiento: 0 (al 30%)
GAPACIÓN PROMEDIA: 1.76 (al 45%)
Compensación final: 3.52 (al 60%)
Establezca el movimiento horizontal para el teléfono …
Comenzando el desplazamiento: 0 (al 30%)
Brecha promedio: 0.76 (al 45%)
Compensación final: 1.52 (al 60%)
Nota: Tenga en cuenta que los valores de compensación se establecen en píxeles. Un valor 1 es igual a 100px. Entonces, un valor de 4.52 es en realidad 452px. Entonces, al final de la animación horizontal en el escritorio, la imagen se moverá 452px a la derecha. 452px se determina por la mitad de la fila (450px) más el marco de 2px. Después de la configuración de desplazamiento de la imagen eventualmente, actualice la imagen final en la columna 2 con los siguientes efectos del movimiento horizontal: establezca el movimiento horizontal para el escritorio …
Comenzando el desplazamiento: -4.52 (al 30%)
GAP promedio: -2.26 (al 45%)
Compensación final: 0 (al 60%)
Establezca el movimiento horizontal para la tableta …
Comenzando el desplazamiento: -3.52 (al 30%)
GAPACIÓN ADRÍA: -1.76 (al 45%)
Compensación final: 0 (al 60%)
Establezca el movimiento horizontal para el teléfono …
Comenzando el desplazamiento: -1.52 (al 30%)
GAP promedio: -0.76 (al 45%)
Compensación final: 0 (al 60%)
Agregando el borde de la sección para probar el desfile antes de echar un vistazo a nuestra animación hasta ahora, debemos agregar algunos bordes temporales y bajos a la sección, para que tengamos un espacio en la página en vivo. Abra la configuración de la sección y actualice lo siguiente:
Marja: 80VH arriba, 80VH abajo
Ahora revise el resultado en una página en vivo. Parte 4: Creación del texto anterior y después del encabezado para completar el diseño, debemos crear el texto antes y después del título sobre cada imagen. Nueva fila para esto, cree una nueva fila con dos columnas.
Copie las líneas de la fila anterior que contiene nuestras imágenes.
Luego pegue los estilos de la fila en la nueva fila.
Agregar módulos de texto Una vez que la fila esté terminada, tire en la parte superior de la fila que contiene las imágenes. Luego agregue un nuevo módulo de texto en la columna 1 de la nueva fila. Luego reemplace el texto del cuerpo con el siguiente:
antes
En la pestaña Diseño, actualice los siguientes estilos de título H2:
2 Sección de fuentes: Roboto
2 encabezado de estilo de fuente: TT
Título 2 Alineación de texto: Centro
Rúbrica 2 Espaciación de litros: 2 PX
Para crear el título para la imagen después, copie el módulo de texto y pegue en la columna 2 de la misma fila.
Luego actualice el texto H2 a “después” en lugar de “avanzar”.
¡Eso es todo! El resultado final aquí es el resultado final. Así es como se ve la tableta y la pantalla del teléfono: y aquí hay algunos ejemplos de lo que puede hacer reemplazando las imágenes utilizadas. Pensamientos finales En este tutorial, le mostré lo fácil que es crear su propio pergamino personalizado y animado y después de las imágenes usando Div. Lo maravilloso de este diseño es que es fácil de reproducir para más ejemplos de imágenes antes y después. ¡Todo lo que tiene que hacer es copiar la sección y actualizar las imágenes! Tenga en cuenta que, para los mejores resultados, querrá mantener esas imágenes del mismo tamaño, de modo que se mantenga alineada durante la animación. Esperamos que esto le brinde un impulso de diseño adicional para su próximo proyecto, que puede necesitar presentar imágenes de antes y después. Espero tener noticias suyas en los comentarios. ¡Suerte!
