Como crear el efecto de CSS KEN BURNS en Divi 馃敟

Efecto Ken Burns en Divi

隆Hola DivilFans! en este tutorial de Divi les ense帽ar茅 c贸mo crear el efecto de CSS KEN BURNS en Divi, sin plugins, con c贸digo CSS y completamente gratis.

Tiempo de lectura estimado: 0 minutos

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

脥ndice

En este video tutorial crearemos el efecto de desplazamiento de Zoom en una imagen de fondo mejor conocido como “Ken Burns” dentro de un m贸dulo de anchura completa y una secci贸n normal de Divi. Este efecto sirve para darle un estilo al fondo interesante y din谩mico, de manera que no se vea solo un fondo est谩tico y aburrido.

El efecto Ken Burns es un tipo de efecto de panor谩mico y de zoom utilizado en la producci贸n de videos a partir de im谩genes fijas y el nombre deriva del uso extensivo de la t茅cnica por el documentalista estadounidense Ken Burns.

Pero mira tu mismo el ejemplo de lo que vamos a lograr:

驴Te ha gustado? Bien, veamos los pasos a seguir.

Paso 1: Crea una secci贸n de anchura completa con una imagen de fondo.

Usaremos el m贸dulo llamado “Fullwidth Header” para presentar este efecto, aunque como lo mencion茅 el el video, tambien se puede usar una secci贸n normal, y aplicar el efecto al fondo de esa secci贸n.

Vamos a colocar el contenido que deseemos y la imagen de fondo correspondiente.

Si gustas, y de manera opcional, puedes colocar una capa superpuesta a la imagen para darle esa tonalidad oscura, que la hace ver con ciertos efectos cinematogr谩ficos.

Importante: Debes configurar la imagen de fondo con efecto “parallax” CSS para que el efecto Ken Burns surta efecto. Si omites este paso, el CSS no funcionar谩.

Paso 2: Aplica la Clase CSS del tipo de efecto “Ken Burns” que desees

En este c贸digo tenemos 4 tipos de efectos Ken Burns cada uno con su clase CSS correspondiente:

  • kb-zoomin 鈥 el zoom mueve la imagen hacia ti.
  • kb-zoomout 鈥 el zoom mueve la imagen lejos de ti.
  • kb-zoomin-right 鈥 el zoom mueve la imagen hacia ti desde la derecha.
  • kb-zoomout-right 鈥 el zoom mueve la imagen lejos de ti desde la derecha.

Escogemos la clase CSS que queramos y debemos aplicarla en las opciones del m贸dulo (o la secci贸n, seg煤n donde hayamos puesto la imagen de fondo) en avanzado, ID y clases de CSS.

驴Quieres aprender a mejorar el dise帽o de tus layouts con Divi? Revisa nuestros Tutoriales Premium de dise帽o y checa todo lo que puedes lograr con Divi.

Paso 3: Aplicamos en c贸digo CSS que nos dar谩 el efecto Ken Burns en Divi

Por 煤ltimo, nos vamos a las opciones del tema Divi > Generales > CSS Personalizado y pegamos el siguiente c贸digo CSS:

/* CSS para efecto "Ken Burns Effect" en Divi */

.kb-zoomout .et_pb_slide .et_parallax_bg {
   animation: zoomout 15s forwards;
  -ms-animation: zoomout 15s forwards;
  -webkit-animation: zoomout 15s forwards;
  -0-animation: zoomout 15s forwards;
  -moz-animation: zoomout 15s forwards;
 
}
 
.kb-zoomin .et_pb_slide .et_parallax_bg {
   animation: zoomin 15s forwards;
  -ms-animation: zoomin 15s forwards;
  -webkit-animation: zoomin 15s forwards;
  -0-animation: zoomin 15s forwards;
  -moz-animation: zoomin 15s forwards;
 
}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
   animation: zoomin-right 15s forwards;
  -ms-animation: zoomin-right 15s forwards;
  -webkit-animation: zoomin-right 15s forwards;
  -0-animation: zoomin-right 15s forwards;
  -moz-animation: zoomin-right 15s forwards;
 
}
 
.kb-zoomout-right .et_pb_slide .et_parallax_bg {
   animation: zoomout-right 15s forwards;
  -ms-animation: zoomout-right 15s forwards;
  -webkit-animation: zoomout-right 15s forwards;
  -0-animation: zoomout-right 15s forwards;
  -moz-animation: zoomout-right 15s forwards;
 
}
 
.kb-zoomout .et_parallax_bg {
   animation: zoomout 15s forwards;
  -ms-animation: zoomout 15s forwards;
  -webkit-animation: zoomout 15s forwards;
  -0-animation: zoomout 15s forwards;
  -moz-animation: zoomout 15s forwards;
 
}
 
.kb-zoomin .et_parallax_bg {
   animation: zoomin 15s forwards;
  -ms-animation: zoomin 15s forwards;
  -webkit-animation: zoomin 15s forwards;
  -0-animation: zoomin 15s forwards;
  -moz-animation: zoomin 15s forwards;
 
}

.kb-zoomin-right .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 17s forwards;
  -webkit-animation: zoomin-right 17s forwards;
  -0-animation: zoomin-right 17s forwards;
  -moz-animation: zoomin-right 17s forwards;
 
}
 
.kb-zoomout-right .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 17s forwards;
  -webkit-animation: zoomout-right 17s forwards;
  -0-animation: zoomout-right 17s forwards;
  -moz-animation: zoomout-right 17s forwards;
 
}
 

/* CSS zoomout */
@keyframes zoomout{
0% {
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}
 
 
100% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
 
}
}

/* CSS zoomin */
@keyframes zoomin{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
 
 
}
 
 
100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
 
}
}

/* CSS zoomout-right */ 

@keyframes zoomout-right{
0%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    animation-timing-function: linear;
}
 
 
100%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
 
}
}
 
/* CSS zoomin-right */
@keyframes zoomin-right{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}
     
 
100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-60px, -20px, 0px);
 
}
}

Si quieres personalizar el tiempo de los efecto, mira como lo hacemos en el videotutorial.

隆Y listo! Con esto tendr谩s este excelente resultado.

Guarda los cambios, y revisa el m贸dulo para ver el efecto Ken Burns en Divi en acci贸n.

隆Muchas gracias! 隆No olvides compartir este contenido en tus redes sociales!

Nos vemos el el proximo video tutorial.

Art铆culos relacionados

Comentarios

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

隆Registrate en nuestro pr贸ximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas m谩s frecuentes que los usuarios hacen sobre Divi, adem谩s de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
d铆as
10
horas
10
minutos
10
segundos
隆Registrate en nuestro pr贸ximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
d铆as
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
驴A煤n no eres miembro Premium 猸 de UXDivi? 隆Esta es tu oportunidad de oro! 脷nete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
d铆as
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
d铆as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
d铆as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!