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 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 llevar 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 la imagen flotante, 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 utilizar 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 rotar 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 de un flujo del 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 consiste en una simple línea de CSS (overflow: hidden) que debe aplicarse a la columna que contiene su imagen. Como 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 utilizando la función de portabilidad de Divi Builder. O simplemente puede arrastrar el archivo a Divi Builder usando la función de arrastrar y soltar de Divi. ¡Eso es!

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 con una fila de una columna. Luego agregue un módulo de imagen a la fila.

efecto hover de ken burns

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;

efecto hover de ken burns

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.

efecto hover de ken burns

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 escala la imagen a un tamaño mayor 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 escala en el eje y (desplazamiento): 136%

efecto hover ken quemaduras

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 gráfica 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.

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

Transformar Girar eje x (flotar): 6 grados

efecto hover de ken burns

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.

efecto hover de ken burns

Agregar el 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 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.

efecto hover de ken burns

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;

efecto hover de ken burns

Luego copie el módulo de imagen y péguelo en la columna 2 y la columna 3.

efecto hover de ken burns

Eso es. Aquí esta el resultado final.

efecto hover de ken burns

Dado que este diseño es más típico de un diseño de cuadrícula de galería, probablemente desee 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.

efecto hover de ken burns

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

efecto hover de ken burns

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

efecto hover de ken burns

Agregar el efecto Hover 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.

efecto hover de ken burns

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

We're Engaged!

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.

efecto hover de ken burns

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

efecto hover de ken burns

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

Transformar escala eje x (desplazamiento): 118%
Transformar escala en el eje y (desplazamiento): 118%

efecto hover de ken burns

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

efecto hover de ken burns

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

CSS del elemento principal de la columna:

overflow:hidden;

efecto hover de ken burns

Ahora mira el resultado.

efecto hover de ken burns

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 Hover de Ken Burns que se aplica a un módulo con efectos adicionales para una creatividad aún mayor.

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, 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%

efecto hover de ken burns

Esta transición establecerá el módulo de texto en 0% de saturación por defecto, 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.

efecto hover 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.
efecto hover de ken burns

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)

efecto hover de ken burns

Ahora agregue los siguientes efectos de transformación:

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

efecto hover de ken burns

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

efecto hover de ken burns

Ahora veamos el resultado final.

efecto hover de ken burns

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 confundir o distraer a 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 de 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 está en 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 una pequeña 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 surgir toneladas de ideas.

Espero tener noticias tuyas en los comentarios.

¡Salud!