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

Inicio / Blog / Snippets / Como crear el efecto de CSS KEN BURNS en Divi 馃敟

Autor: Jefferson M

Publicaci贸n: 24 Mar, 2021

隆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. Los campos obligatorios est谩n marcados con *

Iniciar Sesi贸n

驴No tienes cuenta? Registrarse

Otros planes

隆Accede a m谩s de 1330 contenidos especializados en Dise帽o Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 馃敟

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

驴A qu茅 accedes con este plan?

Lifetime

Un solo pago 馃敟

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

驴A qu茅 accedes con este plan?

Con este plan accedes a:

  1. 鉁 Todos los cursos
  2. 鉁 Todos los tutoriales pr茅mium
  3. 鉁 Todos los plugins y layouts
  4. 鉁 Soporte pr茅mium v铆a email
  5. 鉁 Acceso a la comunidad en Discord

Con este plan accedes a:

  1. 鉁 Todos los cursos
  2. 鉁 Todos los tutoriales pr茅mium
  3. 鉁 Todos los plugins y layouts
  4. 鉁 Soporte pr茅mium v铆a email
  5. 鉁 Acceso a la comunidad en Discord
  6. 鉁 Descuentos en Templates para Divi

Solicitud de cancelaci贸n de suscripci贸n

Aviso importe

馃毄 Debes solicitar la cancelaci贸n de tu suscripci贸n al menos 24 horas antes de tu renovaci贸n, de otro modo, no podremos procesar a tiempo la cancelaci贸n antes de tu renovaci贸n.

Al cancelar tu suscripci贸n, perder谩s el acceso a todo esto:

馃毄 A m谩s de mil contenidos especializados en el aprendizaje del dise帽o web
馃毄 El soporte personalizado en Divi
馃毄 Acceso al grupo de Discord
馃毄 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
馃毄 Puntos y rangos obtenidos en la plataforma

鉁 Te ofrecemos la opci贸n de pausar tu suscripci贸n 2 o 3 meses y as铆 no perder谩s el progreso obtenido en la plataforma.

Lamentamos mucho 馃槱 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos env铆es lleno este formato. Esto nos ayudar谩 a poder seguir mejorando nuestra propuesta de valor y siendo 煤til para todos los usuarios.

Solicitud de cancelaci贸n

驴Por cu谩l o cu谩les razones deseas cancelar tu suscripci贸n?

驴Qu茅 caracter铆sticas mejorar铆as en nuestra web?

驴Cu谩l es tu nivel de satisfacci贸n en relaci贸n con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

驴En esta escala que tanto recomendar铆as a UXDIVI a un amigo o colega? donde 1 es "no lo recomendar铆a" y 5 es "Lo recomendar铆a totalmente"

2 + 11 =