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

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.

El concepto básico explicado

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, colocar y rotar la imagen al pasar el cursor sobre ella. Puede aumentar la propiedad de transformación de escala en un cierto porcentaje para hacer que la imagen crezca al pasar el mouse sobre ella. Puede usar la propiedad de transformación de traducción para mover la imagen a lo largo de los ejes x e y. Y puede rotar la imagen utilizando 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 y el 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 sus fotos.

Puede ajustar fácilmente las propiedades de transformación y las propiedades de transición utilizando la configuración integrada que proporciona Divi. Sin embargo, la clave para hacer que este efecto funcione implica una simple línea de css (desbordamiento: oculto) 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 tiene la idea básica y la funcionalidad en su lugar, es notable lo fácil que es colocar la imagen exactamente como la quiere usando las opciones de transformación de Divi.

Descarga los ejemplos del efecto Hover de Ken Burns GRATIS

Para poner sus manos en los ejemplos gratuitos de Ken Burns Hover Effect, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» 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 al Divi Builder utilizando la función de arrastrar y soltar de Divi. ¡Eso es todo!

Comenzando con una nueva página

Lo primero que debe hacer es crear una nueva página. Luego, asigne un título a su página e implemente Divi Builder en la parte delantera. Luego elija la opción «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.

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:

Esto evitará que la imagen se extienda (o se desborde) más allá del contenedor de la columna siempre que la imagen se escale a un tamaño mayor al pasar el mouse por encima. 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 tendría que deshacerse de cualquier relleno de fila personalizado.

Guarde la configuración de la fila.

Agregando 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 escala la imagen a un tamaño más grande al pasar el mouse sobre ella. Si está utilizando la configuración predeterminada de una fila de una columna, el ancho máximo de la columna será de 1080 px. 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. Vaya a la pestaña de diseño y abra 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 Escala de transformación, actualice lo siguiente:

Eje x de escala de transformación (desplazamiento): 136 %

Eje y de escala de transformación (desplazamiento): 136 %

Luego haga clic en la pestaña Transform Translate y actualice lo siguiente:

Transformar Trasladar eje x (desplazamiento): 3 %

Transformar Trasladar eje y (desplazar): 9 %

Esto mueve la imagen hacia la izquierda un 3% y hacia abajo un 9%. Para esta imagen específica, buscaba un efecto que hiciera zoom y llevara 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 usar porcentajes hace que el posicionamiento sea más receptivo.

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

Transformar Girar el eje x (desplazarse): 6 grados

Actualizar opciones de transición

Por último, necesitamos actualizar la duración de la transición (cuánto tarda en completarse el efecto de desplazamiento de transformación) 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 un efecto de 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 suave en un sitio en vivo.

Agregar el efecto de desplazamiento 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 y agregar el fragmento css «desbordamiento: oculto» a cada una de las columnas que contienen su imagen.

Usando nuestro ejemplo anterior, cambie la estructura de columnas 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:

Columna 2 Elemento principal CSS:

Columna 3 Elemento principal CSS:

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 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 de 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: 500ms

Esta es 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 que no sean el módulo de imagen. Esto funciona bien si desea transformar texto o íconos junto con la imagen de fondo de un módulo.

Aquí 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:

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 por encima.

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

Fuente del encabezado: Prata

Tamaño del texto del encabezado: 6vw

Relleno personalizado: 10vw arriba, 10vw abajo, 3vw a la izquierda

Duración de la transición: 5000ms

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

Eje x de escala de transformación (desplazamiento): 118 %

Eje y de escala de transformación (desplazamiento): 118 %

Transformar Trasladar eje x (desplazamiento): 6 %

Transformar Trasladar eje y (desplazar): 6 %

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

Columna Elemento principal CSS:

Ahora mira el resultado.

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

Combinación del efecto de desplazamiento de Ken Burns con efectos de desplazamiento adicionales

También puede combinar el efecto de desplazamiento 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 por encima. Y puede combinar estos efectos de filtro con el efecto de transformación para algunas transiciones de desplazamiento bastante únicas.

Para mostrártelo, 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 (predeterminada): 0 %

Saturación (desplazamiento): 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. Al volver al 100% al pasar el mouse, se 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.

Combinación del efecto de desplazamiento de Ken Burns con efectos de transformación de fila

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á pasar el cursor sobre el módulo y la fila simultáneamente. Por lo tanto, el módulo debe ocupar todo el alto y el ancho de la fila. Los módulos adicionales o el espacio 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 esto es en realidad un triple efecto de desplazamiento!

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, vamos a agregar una sombra de cuadro a la fila de la siguiente manera:

Sombra de cuadro: ver captura de pantalla

Fuerza de desenfoque de sombra de cuadro: 36px

Color de sombra: rgba(0,0,0,0.17)

Ahora agregue los siguientes efectos de transformación:

Transformar el eje x de la escala (predeterminado): 70 %

Transformar el eje x de la escala (suspender): 100 %

Transformar el eje y de la escala (predeterminado): 70 %

Transformar el eje y de la escala (suspender): 100 %

Transformar Rotar eje y (predeterminado): 19 grados

Transformar Rotar eje y (pasar el mouse): 0 grados

Transformar Rotar eje z (predeterminado): 23 grados

Transformar Rotar eje z (pasar el mouse): 0 grados

Ahora veamos el resultado final.

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

En caso de que se lo pregunte, el efecto de desplazamiento de Ken Burns también se puede usar para dar vida a una fila completa de contenido al pasar el mouse. Esto no será muy práctico para filas con mucho contenido porque será confuso 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, aún puede resultarle útil para crear algunos efectos de desplazamiento bastante únicos para sus imágenes y módulos en Divi. El truco es saber cómo usar las opciones de Divi Transform que son sorprendentemente intuitivas. Los ejemplos proporcionados en este tutorial tenían como objetivo 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 surgir toneladas de ideas.

Espero escuchar de usted en los comentarios.

¡Salud!