¿Qué es el efecto Ken Burns?
El efecto Ken Burns es ese por el que una imagen parece que se mueve haciendo zoom y desplazamiento lentos hacia dentro, hacia afuera o en cualquier dirección.
Si te animas, en unos pocos pasos puedes aplicarlo en Divi para hacer tus imágenes de fondo más dinámicas, por ejemplo.
La magia del CSS
Lo primero de todo es añadir el CSS que creará la magia. Así que ve al Personalizador de temas de WordPress y, en la sección CSS adicional, añade lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | /** Efecto kenburns Divi **/ .kb-zoomout .et_pb_slide .et_parallax_bg { animation: zoomout 7s forwards; -ms-animation: zoomout 7s forwards; -webkit-animation: zoomout 7s forwards; -0-animation: zoomout 7s forwards; -moz-animation: zoomout 7s forwards; } .kb-zoomin .et_pb_slide .et_parallax_bg { animation: zoomin 7s forwards; -ms-animation: zoomin 7s forwards; -webkit-animation: zoomin 7s forwards; -0-animation: zoomin 7s forwards; -moz-animation: zoomin 7s forwards; } .kb-zoomin-right .et_pb_slide .et_parallax_bg { animation: zoomin-right 7s forwards; -ms-animation: zoomin-right 7s forwards; -webkit-animation: zoomin-right 7s forwards; -0-animation: zoomin-right 7s forwards; -moz-animation: zoomin-right 7s forwards; } .kb-zoomout-right .et_pb_slide .et_parallax_bg { animation: zoomout-right 7s forwards; -ms-animation: zoomout-right 7s forwards; -webkit-animation: zoomout-right 7s forwards; -0-animation: zoomout-right 7s forwards; -moz-animation: zoomout-right 7s forwards; } .kb-zoomout .et_parallax_bg { animation: zoomout 17s forwards; -ms-animation: zoomout 17s forwards; -webkit-animation: zoomout 17s forwards; -0-animation: zoomout 17s forwards; -moz-animation: zoomout 17s forwards; } .kb-zoomin .et_parallax_bg { animation: zoomin 17s forwards; -ms-animation: zoomin 17s forwards; -webkit-animation: zoomin 17s forwards; -0-animation: zoomin 17s forwards; -moz-animation: zoomin 17s 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; } @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); } } @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); } } @keyframes zoomout-right{ 0%{ -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -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); } } @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(-150px, -20px, 0px); -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px); } } |
Como verás es bastante largo, y puede que no uses todo finalmente, pero hazme caso y añade todo, ya decidirás más tarde tú mismo que estilos usarás y cuáles no.
El código CSS cubre todas las posibilidades de efecto zoom de Ken Burns, en todas direcciones: centrado hacia afuera y hacia adentro, desde la derecha, desde la izquierda, etc.
Añade el efecto Ken Burns a tus módulos
Donde realmente se nota y luce el efecto Ken Burns es en módulos con grandes imágenes, como el título a pantalla completa, o los carruseles de diapositivas, pero puedes usarlo en cualquier parte.
Para aplicarlo a tu módulo favorito solo tienes que cumplir 2 reglas:
- Añade las clases CSS de efecto Ken Burns al módulo elegido.
- Activa el efecto parallax en modo CSS (importante, sino no funciona) al módulo, la sección o la fila.
Así, por ejemplo, en un carrusel, añadiríamos la clase CSS siguiente:
En este caso hemos añadido la clase CSS que activa el efecto Ken Burns que acerca la imagen (zoomin) desde la derecha (right).
El efecto lo puedes ver en la diapositiva de imagen (segunda) de la web de mi coworking, aquí.
(6 votos, promedio: 4.7)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
