Como añadir un efecto zoom panorámico a un título de anchura completa

por | 4 Ene, 2017 | css, Divi, Tutoriales

Cómo añadir el efecto de zoom panorámico (Ken Burns) a un título de anchura completa usando Divi

Buscando por la red un efecto chulo para poner en un header de anchura completa, acabe en Divisoup. Es un sitio muy recomendable donde poder seguir distintos tutoriales sobre Divi de manera sencilla y directa. Alli encontré este efecto que os traigo para que podáis usar en vuestros sitios.

Por lo tanto, vamos a ver en esta ocasión cómo añadir un efecto de zoom panorámico sobre una imagen que vincularemos a un título de anchura completa. Puedes ver el efecto aquí.

La mayoría de la gente usa algún plugin como Slider Revolution para conseguir este efecto pero con el código que vas a poder copiar y pegar en tu sitio no necesitarás ningún plugin. Tampoco es necesario programación JS. Todo está realizado integramente con CSS.

Como siempre, necesitarás tener instalado el tema Divi en tu WordPress. Asímismo, necesitaremos una imagen con unas dimensiones de 1920x1200px. Esta imagen será la que importaremos con CSS y le aplicaremos el efecto. Yo la he obtenido de pixabay.

Tutorial Divi. Efecto zoom panorámico. Preparando los elementos

Vamos a necesitar una sección de anchura completa, de modo que la creamos (1) y eliminamos la que se crea por defecto (2).

Insertamos a continuación columna, que elegimos 1 y añadimos módulo (3).

El módulo

El módulo que vamos a utilizar es Título de anchura completa. Pulsamos seguidamente en ajustes del módulo. Recuerda que para configurar los ajustes del módulo pulsaras en el icono de la barra gris. Para ajustes de fila, verde, y para la sección será de color azul si es una sección estándar o morado como en este caso cuando la sección es de anchura completa. Pulsamos por tanto en el iconito de ajustes del módulo (barra gris) y se abrirá un panel como el que ves bajo estas líneas.

ajustes-modulo-titulo-anchura-completa

Introduce texto de título, subtítulo, botón, colores, etc para tu módulo. Pero no te olvides de activar «Hacer que se muestre a pantalla completa».

Seguimos con el módulo y ahora vamos a hacer click en la pestaña CSS personalizado. Añadimos la clase en el apartado Clase CSS. Así que escribimos ds-kenburns-header en este apartado y ya podemos cerrar, de manera que pulsamos en guardar y salir.

ajustes-modulo-titulo-anchura-completa-css. Tutorial Divi. Efecto zoom panorámico

Ajustes de la sección

Puesto que la imagen se va a importar desde el código css y no la vamos a incluir como fondo ni nada parecido, es muy importante que activemos la opción Color de fondo transparente en los ajustes de la sección (clor morado). De otro modo, no se vería la imagen sobre la que hacemos el efecto.

ajustes-modulo-titulo-anchura-completa-css

El código CSS

Y ya sólo nos resta incluir el código en la zona correspondiente. Puedes ponerlo en las opciones de tema (Divi). En la imagen puedes ver cómo, aunque el código que ves pertenece a otro ejercicio.

ajustes-css-divi

También puedes incluir el código CSS tema hijo si estás usando uno, lo cual es lo más recomendable.

/*-----Ken Burns Header-----*/

.ds-kenburns-header {

overflow:hidden ;

position: relative;

padding: 0;

}

.ds-kenburns-header:before {

content: “”;

position: absolute;

left:0;

top:0;/*Left and Top marcan la alineación de la imagen, es posible modificarla si quieres que la imagen se mueva en otra dirección*/


width: calc(100vw + 120px); /*Estamos agregando un poco más de ancho y altura a la imagen por lo que cuando se amplía y se desplaza no tengamos ningún espacio en blanco a su alrededor.*/

height: calc(100vh + 150px);

z-index: -1;

background: url(https://aulamedia.net/Demo_Ken_Burns/insecto_o.jpg); /*Cambia la URL por la de tu imagen*/

background-repeat: no-repeat;


background-size: cover;

background-position: center center;

-ms-animation:move 8s ease forwards;

-webkit-animation:move 8s ease forwards;

-0-animation:move 8s ease forwards;

-moz-animation:move 8s ease forwards;

animation:move 8s ease forwards; /* Esto fija la duración del efecto y el valor ‘forwards’ indica al efecto que se detenga cuando termine en vez de quedarse en bucle. */

}


@keyframes move {

from {

-ms-transform: scale3d(1);

-webkit-transform: scale3d(1);

-o-transform: scale3d(1);

-moz-transform: scale3d(1);

transform: scale3d(1); /*Esto le indica a la imagen que comience con su tamaño original*/

}

to {


-ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);

-webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);

-o-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);

-moz-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);

transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px); /*Esto le dice a la imagen que termine en 1.2x su tamaño original y en una posición de -150px en el eje X y -120px en el eje Y. Puedes ajustar estos valores para obtener variaciones del efecto*/

}

}