Efecto del zoom « Ken Burns » en los encabezados de pantalla completa y diapositivas Divi

El efecto "Ken Burns" es un efecto bien conocido, simple y eficaz para dar una impresión de movimiento a las imágenes estáticas. En este artículo, explico cómo simplemente añadir estos efectos a su cabecera de pantalla completa o presentaciones Divi con algunas líneas CSS.

1 - ¿Cuál es el efecto "Ken Burns"?

El "Ken Burns Effect" es una técnica de animación utilizada principalmente en la edición de vídeo y presentaciones de diapositivas de vídeo. Consiste en aplicar un movimiento de cámara simulado a una imagen fija, combinando un zoom delantero/rear y un desplazamiento panorámico (lateral o vertical).

Este término viene del artista documental americano Ken Burns, que ha popularizado ampliamente esta técnica en sus películas históricas, especialmente para dar dinámica a las fotografías de archivo.

Estos efectos pueden utilizarse en:

• Documental : dar vida a las fotos históricas.
• Slideshows : hacer presentaciones más atractivas.
• Montajes de vídeo Software como iMovie, Final Cut Pro, Premiere Pro, etc. generalmente ofrecen estos efectos de Ken Burns.

Es un efecto simple pero eficaz para captar la atención del espectador y dar una impresión de movimiento a las imágenes estáticas.

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

2 - Crear el efecto Ken Burns con algunas líneas CSS

Crearemos 6 clases CSS que se pueden aplicar a ciertos módulos Divi. Añada el siguiente código a la Apariencia > Customize CSS adicional:

.kb-zoomout .et_pb_slide .et_parallax_bg,
.kb-zoomout .et_parallax_bg {
  animation: zoomout 7s forwards;
}

.kb-zoomin .et_pb_slide .et_parallax_bg,
.kb-zoomin .et_parallax_bg {
  animation: zoomin 7s forwards;
}

.kb-zoomin-right .et_pb_slide .et_parallax_bg,
.kb-zoomin-right .et_parallax_bg {
  animation: zoomin-right 7s forwards;
}

.kb-zoomout-right .et_pb_slide .et_parallax_bg,
.kb-zoomout-right .et_parallax_bg {
  animation: zoomout-right 7s forwards;
}

.kb-zoomin-left .et_pb_slide .et_parallax_bg,
.kb-zoomin-left .et_parallax_bg {
  animation: zoomin-left 7s forwards;
}

.kb-zoomout-left .et_pb_slide .et_parallax_bg,
.kb-zoomout-left .et_parallax_bg {
  animation: zoomout-left 7s forwards;
}

@keyframes zoomout {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomout-right {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-right {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
}

@keyframes zoomout-left {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-left {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
}

Aquí están algunas explicaciones:

1. .kb-zoomin : Zoom en (agrandamiento). Animación: el elemento comienza a 1.1x su tamaño normal y crece gradualmente hasta 1,5x.
2. .kb-zoomout : Zoom de vuelta (reducción). Animación: el elemento comienza a 1,5x su tamaño y regresa gradualmente a 1.1x.
3. .kb-zoomin-right : Ampliar hacia adelante con moverse hacia la derecha. Animación: El elemento crece mientras se mueve a la derecha (-150px en X).
4. .kb-zoomout-right : Zoom de vuelta con movimiento derecho. Animación: el elemento se encoge mientras se mueve a la derecha (-150px en X).
5. .kb-zoomin-left : Ampliar hacia adelante con el movimiento de la izquierda. Animación: el elemento crece mientras se mueve a la izquierda (+150 px en X).
6. .kb-zoomout-left : Zoom de vuelta con movimiento de mano izquierda. Animación: el elemento se encoge mientras se mueve a la izquierda (+150 px en X).

Como recordatorio: Así es como añadir código a Divi.

3 - Añadir un efecto Ken Burns a un módulo de "cabeza de pantalla completa"

Una vez que el CSS se añade a su sitio, será muy fácil añadir el efecto en un encabezado de pantalla completa por ejemplo. Para ello, agregue una sección de pantalla completa (sección violenta) a su página y agregue un módulo en esta sección Header Full Screen.

1. Desde la pestaña Contenido del encabezado de pantalla completa, agregue una imagen de fondo. Activar la opción Parallax + CSS método.
2. Luego, en la pestaña Modelo de Estilo: pasar la imagen en modo de pantalla completa.
3. Finalmente, en la pestaña Avanzada, añadir una de las 6 clases CSS creadas anteriormente.

¡Ahí tienes! ¡Tu imagen parece animada!

4 - Añadir el efecto Ken Burns en un "Full Screen Scroller" (diapo)

El código CSS añadido anteriormente también funciona en el módulo Persiana de pantalla completa. Usted procederá de la misma manera:

1. Agregue una sección de pantalla completa (sección violenta) y elija el módulo Fullscreen Scroll Curder.
2. Añade tus diapositivas sin olvidar poner, para cada uno de ellos, una imagen de fondo con el efecto parallax + CSS.
3. En la ficha Avanzada, agregue una de las 6 clases CSS creadas anteriormente.

Y aquí está el resultado: con cada cambio de diapositivas, el efecto será activado!

5 - En conclusión: un efecto zoom fácil y sencillo pero un poco limitado...

Si probaste este tutorial, te diste cuenta de que no era difícil añadir un efecto Ken Burns a algunas imágenes. Encuentro el efecto exitoso y fácil de implementar.

Sin embargo, usted puede haber notado que hay algunas limitaciones, en particular el hecho de que esta animación sólo activa una vez cargada la página. No es incómodo para un encabezado de pantalla completa situado al principio de la distribución, pero si pone este módulo al final de la página, nunca se verá...

El código debe ser adaptado con Javascript para que la animación se juegue sólo cuando el artículo entra en la pantalla... No dude en pedir ayuda de ChatGPT, por ejemplo, para lograr este...

En cuanto al Scroll Curder, la animación sale cada cambio de diapositivas, así que no es un problema!

Además, encontrará en el sitio web de ElegantThemes otro tutorial para añadir efectos de Ken Burns directamente a los módulos de imagen, líneas y secciones.

Dime en el comentario si te gusta este efecto Ken Burns!