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

Inicio / Blog / Snippets / Como crear el efecto de CSS 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: 6 minutos

脥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.

0 comentarios

Enviar un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.