Cómo agregar efectos de desplazamiento de Ken Burns a imágenes, módulos y filas en Divi

El efecto Ken Burns ha existido por un tiempo. El efecto se hizo famoso por el documentalista estadounidense Ken Burns, ya que utilizó una combinación de técnicas de panorámica y zoom para dar vida a las imágenes en sus películas. En diseño web, el efecto Ken Burns ha demostrado ser una técnica de diseño popular para dar vida a las imágenes de fondo.

El efecto Ken Burns también se puede utilizar como un efecto de desplazamiento para las imágenes. Seguro que has visto esto usado antes. En un esfuerzo por dar vida a las imágenes, los diseñadores web agregan efectos de desplazamiento a las imágenes que hacen que se amplíen, se muevan y roten.

Con el lanzamiento de Transform Effects para Divi Builder, nunca ha sido tan fácil incorporar efectos de desplazamiento de Ken Burns a tus imágenes. Estas opciones de transformación le permiten escalar (hacer zoom), mover (o desplazarse) y rotar una imagen como desee. Y dado que puede aplicar estas transformaciones al estado de desplazamiento de la imagen, las posibilidades de diseño son prácticamente infinitas.

En este tutorial, le mostraré lo fácil que es crear efectos de desplazamiento de ken burns completamente únicos en imágenes y filas utilizando Divi Builder.

Empecemos.

Vistazo

Aquí hay un adelanto del efecto de desplazamiento de Ken Burns que se puede lograr fácilmente con las opciones de transformación de Divi.

Explicación del concepto básico

El concepto básico para crear el efecto de desplazamiento de Ken Burns implica el uso de las nuevas opciones de transformación de Divi para escalar, posicionar y rotar la imagen al pasar el cursor sobre esa imagen. Puede aumentar la propiedad de transformación de escala en un cierto porcentaje para hacer que la imagen crezca al pasar el mouse. Puede usar la propiedad de transformación de traducción para mover la imagen a lo largo de los ejes xey. Y puede rotar la imagen usando la propiedad de transformación de rotación estableciendo un valor de grado específico (en este caso, el valor de grado para la rotación en el eje x). Por último, puede controlar la duración de la transición (velocidad) y la curva de velocidad para controlar la velocidad a la que fluye el efecto de desplazamiento de Ken Burns. Las tres propiedades de transformación y las propiedades de transición trabajan juntas para crear un efecto de desplazamiento de Ken Burns que da vida a tus fotos.

Puede ajustar fácilmente las propiedades de transformación y las propiedades de transición utilizando la configuración incorporada que proporciona Divi. Sin embargo, la clave para hacer que este efecto funcione implica una simple línea de CSS (overflow: hidden) que debe aplicarse a la columna que contiene su imagen. Dado que va a escalar, mover y rotar la imagen, desea que el desbordamiento de la imagen se oculte fuera de la columna que la contiene.

Una vez que tenga la idea básica y la funcionalidad en su lugar, es notable lo fácil que es colocar la imagen exactamente como la desea utilizando las opciones de transformación de Divi.

Descargue los ejemplos de efectos de desplazamiento de Ken Burns GRATIS

Para tener en sus manos los ejemplos gratuitos de efectos de desplazamiento de Ken Burns, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Una vez que haya descargado el archivo zip, descomprima la carpeta. A continuación, importe el diseño .json mediante la función de portabilidad de Divi Builder. O simplemente puede arrastrar el archivo al Divi Builder usando la funcionalidad de arrastrar y soltar de Divi. ¡Eso es todo!

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Introducción a una página nueva

Lo primero que debe hacer es crear una nueva página. Luego, déle un título a la página e implemente Divi Builder en la interfaz. Luego elija la opción de "Construir desde cero".

Agregar el efecto Ken Burns a una imagen en una fila de una columna

Para este primer ejemplo básico, le mostraré cómo agregar el efecto de desplazamiento de Ken Burns a una sola imagen en una fila de una columna. Usaré las opciones de transformación de escala, traducción y rotación para lograr este efecto.

Primero, cree una nueva sección nueva con una fila de una columna. Luego agregue un módulo de imagen a la fila.

Ocultar el desbordamiento de la columna

Antes de comenzar a actualizar la configuración de la imagen, abra la configuración de la fila y haga clic en la pestaña Avanzado. Luego, agregue el siguiente CSS personalizado al elemento principal de la columna:

overflow: hidden;

Esto evitará que la imagen se extienda (o se desborde) más allá del contenedor de la columna siempre que la imagen se amplíe a un tamaño mayor al pasar el mouse. Si no agrega esto, la imagen saldrá del contenedor y ocultará otros elementos de la página. Técnicamente, podría agregar este CSS al elemento principal de la fila en lugar de a la columna, pero también necesitaría deshacerse de cualquier relleno de fila personalizado.

Guarde la configuración de la fila.

Añadiendo tu imagen

Ahora podemos agregar una imagen al módulo de imagen. Abra la configuración del módulo de imagen y agregue una imagen.

Asegúrese de que la imagen sea considerablemente más grande que la columna. Esto es importante para evitar que la imagen se vea borrosa cuando la escala a un tamaño más grande al pasar el mouse. Si está utilizando la configuración predeterminada de una fila de una columna, el ancho máximo de la columna será 1080px. Entonces, estoy usando una imagen que tiene aproximadamente 1500 px de ancho y 900 px de alto.

Importante: Como regla general, cuanto más grande sea la imagen, más espacio tendrá para escalar, mover y rotar la imagen sin perder calidad de imagen.

Adición de efectos de desplazamiento de transformación

Ahora que tenemos nuestra imagen en su lugar, es hora de usar esas opciones de transformación para crear el efecto de desplazamiento de Ken Burns. Salta a la pestaña de diseño para abrir las opciones de Transformar. Active los efectos de desplazamiento y seleccione la pestaña de desplazamiento. Ahora, cualquier personalización del efecto de transformación se aplicará solo al estado de desplazamiento del módulo de imagen. Luego, en la pestaña Transformar escala, actualice lo siguiente:

Transformar escala eje x (desplazamiento): 136%
Transformar el eje y de la escala (flotar): 136%

Luego haga clic en la pestaña Transformar Traducir y actualice lo siguiente:

Transformar Traslado del eje x (desplazamiento): 3%
Transformar Traslado del eje y (desplazamiento): 9%

Esto mueve la imagen hacia la izquierda en un 3% y hacia abajo en un 9%. Para esta imagen específica, buscaba un efecto que acercaría y llevaría a la pareja al centro de la ventana de visualización de la columna.

De forma predeterminada, los valores de longitud de traducción estarán en píxeles (no en porcentaje). Puede usar píxeles para mover la imagen, pero creo que el uso de porcentajes hace que el posicionamiento sea más receptivo.

A continuación, haga clic en la pestaña Transformar Girar y actualice lo siguiente:

Transformar Girar eje x (flotar): 6 grados

Actualizar opciones de transición

Finalmente, necesitamos actualizar la duración de la transición (cuánto tiempo tarda el efecto de desplazamiento de transformación en completarse) y la curva de velocidad (la función de tiempo que permite que la transición cambie de velocidad durante su duración). Para este ejemplo, quiero que la transición tome más tiempo para obtener un efecto Ken Burns más dramático (y clásico) al pasar el mouse. Para hacer esto, vaya a la pestaña avanzada y actualice las opciones de transición de la siguiente manera:

Duración de la transición: 2000 ms (o 2 segundos)
Curva de velocidad de transición: lineal (esto asegura que la velocidad de la transición no cambie en duración)

Resultado final

Ahora veamos el resultado final. No se deje engañar por la agitación del gif a continuación. La transición es realmente fluida en un sitio en vivo.

Adición del efecto Hover de Ken Burns a varias imágenes en una fila de tres columnas

Si desea agregar el efecto de desplazamiento de Ken Burns a las imágenes en varias columnas, se aplica el mismo proceso. Lo principal que debe hacer es asegurarse de agregar el fragmento de CSS "overflow: hidden" a cada una de las columnas que contienen su imagen.

Usando nuestro ejemplo anterior, cambie la estructura de la columna de la fila a un diseño de tres columnas.

A continuación, actualice la configuración de la fila con los fragmentos de CSS personalizados que ocultarán el desbordamiento de cada columna.

Columna 1 Elemento principal CSS:

overflow:hidden;

Columna 2 Elemento principal CSS:

overflow:hidden;

Columna 3 Elemento principal CSS:

overflow:hidden;

A continuación, copie el módulo de imagen y péguelo en la columna 2 y la columna 3.

Eso es todo. Aquí esta el resultado final.

Dado que este diseño es más típico de un diseño de cuadrícula de galería, probablemente querrá acelerar un poco la duración de la transición para agudizar la animación de desplazamiento. Puede hacer esto fácilmente usando la función de selección múltiple de Divi. Mantenga presionada la tecla ctrl o cmd y seleccione todos los módulos de imagen. Luego haga clic en el icono de engranaje de configuración en una de las imágenes para abrir el modal Configuración de elemento.

Ahora, cualquier actualización que realice en la configuración del elemento se aplicará a todas las imágenes a la vez. Actualice las opciones de transición en la configuración del elemento de la siguiente manera:

Duración de la transición: 500 ms

Aquí está la nueva duración de la transición en vigor.

Agregar el efecto de desplazamiento de Ken Burns a cualquier módulo con una imagen de fondo

El efecto de desplazamiento de Ken Burns también se puede utilizar para módulos distintos del Módulo de imagen. Esto funciona bien si desea transformar texto o iconos junto con la imagen de fondo de un módulo.

A continuación se explica cómo agregar el efecto Ken Burns a un módulo de texto.

Primero cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de texto a la fila.

Actualice el módulo de texto con el siguiente contenido:

<h1>We're Engaged!</h1>

Luego agregue una imagen de fondo al módulo. Recuerde agregar una imagen lo suficientemente grande como para dejar espacio para escalar y mover la imagen al pasar el mouse.

Y luego actualice las opciones de diseño de encabezado de la siguiente manera:

Fuente de encabezado: Prata
Tamaño del texto del encabezado: 6vw
Relleno personalizado: 10vw superior, 10vw inferior, 3vw izquierdo

Duración de la transición: 5000 ms

Ahora agregue la siguiente configuración de transformación al módulo de texto.

Transformar escala eje x (desplazamiento): 118%
Transformar el eje y de la escala (flotar): 118%

Transformar Traslado del eje x (desplazamiento): 6%
Transformar Traslado del eje y (desplazamiento): 6%

Ahora, actualice la configuración de la fila con el siguiente CSS personalizado para la columna.

CSS del elemento principal de la columna:

overflow:hidden;

Ahora mira el resultado.

Observe cómo el texto y la imagen de fondo se transformarán juntos al pasar el mouse.

Combinando el efecto Hover de Ken Burns con efectos Hover adicionales

También puede combinar el efecto de desplazamiento de Ken Burns que se aplica a un módulo con efectos adicionales para lograr aún más creatividad.

Combinando el efecto Hover de Ken Burns con efectos de filtro

En caso de que se haya olvidado de ellos, los efectos de filtro son una excelente manera de agregar un estilo creativo a sus módulos, especialmente al pasar el mouse. Y puede combinar estos efectos de filtro con el efecto de transformación para algunas transiciones de desplazamiento bastante únicas.

Para mostrarle, usemos el ejemplo anterior que agregó el efecto Ken Burns a un módulo de texto. Dado que el módulo de texto ya tiene el efecto de desplazamiento de transformación en su lugar, agreguemos un efecto de filtro adicional para cambiar la imagen de blanco y negro a color.

Abra la configuración del módulo de texto y actualice la siguiente opción de filtro:

Saturación (predeterminado): 0%
Saturación (flotar): 100%

Esta transición establecerá el módulo de texto en 0% de saturación de forma predeterminada, lo que eliminará el color y lo convertirá en blanco y negro. Volver al 100% al pasar el mouse agregará el color original de la imagen.

Aquí está el efecto final del efecto de filtro combinado con el efecto de desplazamiento de Ken Burns.

Combinando el efecto Hover de Ken Burns con los efectos de transformación de filas

Para este ejemplo, le mostraré cómo combinar el efecto de desplazamiento de Ken Burns con un efecto de transformación adicional agregado a la fila. La idea es usar efectos de transformación para escalar y rotar la fila en su estado predeterminado y luego restaurar el diseño original al pasar el mouse.

NOTA: Esta técnica realmente solo funcionará bien para una fila de una columna con un solo módulo. Esto se debe a que el visitante deberá desplazarse sobre el módulo y la fila simultáneamente. Por lo tanto, el módulo debe ocupar toda la altura y el ancho de la fila. Los módulos adicionales o el espaciado romperán el estado de desplazamiento y causarán problemas.

Para hacer esto, nos quedaremos con nuestro diseño de módulo de texto actual que ya combina el efecto de desplazamiento de Ken Burns con un efecto de filtro adicional. ¡Así que este es en realidad un efecto de desplazamiento triple!

Abra la configuración de la fila que contiene el módulo de texto. Luego actualice lo siguiente:

Relleno personalizado: 0px arriba, 0px abajo, 0px izquierda, 0px derecha

Esto es para asegurarse de que no haya espacio adicional entre el módulo de texto y la fila.

A continuación, agregaremos una sombra de cuadro a la fila de la siguiente manera:

Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 36px
Color de sombra: rgba (0,0,0,0.17)

Ahora agregue los siguientes efectos de transformación:

Transformar escala eje x (predeterminado): 70%
Transformar escala eje x (desplazamiento): 100%
Transformar escala eje y (predeterminado): 70%
Transformar escala en el eje y (desplazamiento): 100%

Transformar Girar eje y (predeterminado): 19 grados
Transformar Girar eje y (desplazamiento): 0deg
Transformar Girar eje z (predeterminado): 23 grados
Transformar Girar eje z (desplazamiento): 0deg

Ahora veamos el resultado final.

Agregar el efecto de desplazamiento de Ken Burns a toda una fila de contenido

En caso de que se lo pregunte, el efecto de desplazamiento de Ken Burns también se puede utilizar para dar vida a una fila completa de contenido. Esto no será muy práctico para filas con mucho contenido porque será una forma de confusión o distracción para los visitantes. Pero para cosas como los encabezados, esta puede ser una técnica de diseño útil. El truco consiste en agregar el fragmento CSS personalizado "overflow: hidden" a la sección. Luego, puede agregar los efectos de transformación a la fila.

Pensamientos finales

Aunque el efecto Ken Burns ha existido por un tiempo, es posible que aún lo encuentre útil para crear algunos efectos de desplazamiento bastante únicos para sus imágenes y módulos en Divi. El truco es saber cómo utilizar las opciones de Divi Transform, que son sorprendentemente intuitivas. Los ejemplos que se dan en este tutorial están destinados a presentar el concepto y, con suerte, proporcionar un poco de inspiración para su propio uso. Cuando piensa en todas las formas en que combina las opciones de transformación con todas las demás opciones de estilo disponibles en Divi, comienzan a aparecer toneladas de ideas.

Espero tener noticias tuyas en los comentarios.

¡Salud!