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

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 efecto Ken Burns con algunas líneas CSS

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

.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 : Volvamos con el movimiento de la 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 – Add Ken Efecto de quemaduras a un módulo « Cabecera 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 Contenidos del módulo Header Full Screen, agregue una imagen de fondo. Activar la opción Parallax + CSS método.
2. Luego en el estilo Ficha modelo: 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 « Persiana de pantalla completa » (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 algo limitado...

Si probaste este tutorial, te diste cuenta de que no era difícil añadir un efecto Ken Burns en 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 al cargar la página. Esto 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á...

Por lo tanto, el código debe adaptarse con Javascript para que la animación se juegue sólo cuando el elemento entra en la pantalla... No dude en pedir ayuda de ChatGPT, por ejemplo, para llegar allí...

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

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

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