El efecto Ken Burns ha existido por algún tiempo. El efecto fue reconocido por el documental estadounidense Ken Burns, ya que utilizó una combinación de técnicas de panorama y zoom para dar vida a las imágenes en sus películas. En el diseño web, el efecto Ken Burns ha demostrado ser una técnica de diseño popular para dar vida a las imágenes de fondo. El efecto Ken Burns también se puede utilizar como efecto de caminata para imágenes. Ciertamente has visto esto utilizado antes. En un esfuerzo por dar vida a las imágenes, los diseñadores web agregan efectos flotantes a las imágenes que hacen que se van, se muevan y giren.
Con el lanzamiento de los efectos transformados en una división de constructor, nunca fue más fácil traer a sus fotos Ken Burns Shooting Effects. Estas opciones de transformación le permiten escalar (ampliar), moverse (o moverse) y girar una imagen como desee. Y, dado que puede aplicar estas transformaciones al estado flotante de la imagen, las posibilidades de diseño son casi ilimitadas. En este tutorial, le mostraré lo fácil que es crear desplazamiento con un quemador completamente único en imágenes y filas que usan Divi Builder. Vamos a empezar. Pull With the Eye es una breve mirada al efecto de Ken Burns, que se puede hacer fácilmente con las opciones de transformación de Div.





El concepto básico explicó que el concepto básico para crear el efecto Ken Burns flotante implica el uso de las nuevas opciones de transformación para escalar, posicionar y llorar la imagen cuando pasa por encima de esa imagen. Puede aumentar la propiedad de transformación de la escalera en un cierto porcentaje para que la imagen crezca en una caminata. Puede usar la propiedad de transformación para mover la imagen a lo largo de los ejes x e y. Y puede rotar la imagen utilizando la propiedad de giro de la transformación estableciendo un grado específico (en este caso, el valor del grado de rotación en el eje x). Finalmente, puede controlar el tiempo de transición (velocidad) y la curva de velocidad para controlar la velocidad de flujo del efecto de quema de Ken. Las tres propiedades de transformación y las propiedades de transición funcionan juntas para crear un efecto Ken Ken que da vida a las fotos. Puede ajustar fácilmente las propiedades de transformación y las propiedades de transición utilizando la configuración construida ofrecida por Div. Sin embargo, la clave para que este efecto funcione implica una línea CSS simple (desbordamiento: oculto) que se aplicará a la columna de la columna que la contiene. Una vez que tenga la idea básica y la funcionalidad, es notable lo fácil que es colocar la imagen exactamente como desee, utilizando las opciones de transformación de DIV.
Descargue los exámenes gratuitos de los efectos de Ken Burns Hover para poner su mano en los efectos gratuitos de Ken Burns Hover, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales. Después de descargar el archivo zip, descomprima la carpeta. Luego importe el look .json utilizando la portabilidad Div Divi Builder. O simplemente puede extraer el archivo en la división del constructor usando la función DIV Drag y Drop. ¡Eso es todo! Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!

Nociones introductorias sobre una nueva página Lo primero que debe hacer es crear una nueva página. Luego, déle a la página un título e implementa Divi Builder en el frente. Luego elija la opción “Construir desde cero”.
Agregar el efecto Ken Burns a una imagen en una fila con una columna para este primer ejemplo básico, le mostraré cómo agregar el efecto Ken Hover Hover a una sola imagen en una fila con una columna. Usaré la escala, la traducción y la rotación de las opciones de transformación para lograr este efecto. Primero, cree una nueva sección nueva con una fila con una columna. Luego agregue un módulo de imagen en una fila. La carcasa de Spining la columna antes de comenzar a actualizar la configuración de la imagen, abra la configuración promedio y haga clic en la pestaña avanzada. Luego agregue el siguiente CSS personalizado al elemento principal de la columna:
Desbordamiento: oculto;
Esto evitará la extensión (o desbordamiento) de la imagen más allá del contenedor de columna siempre que la imagen aumente a una dimensión mayor durante el cursor. Si no agrega esto, la imagen saldrá del contenedor y ocultará otros elementos de la página. Desde un punto de vista técnico, puede agregar este CSS al elemento principal de la fila en lugar de la columna, pero también debe deshacerse de cualquier relleno ordinario personalizado. Guarde la configuración de la fila. Agregar imagen Ahora podemos agregar una imagen al módulo de imagen. Abra la configuración del módulo de imagen y agregue una imagen.

Asegúrese de que la imagen sea considerablemente más grande que la columna. Esto es importante para evitar que la imagen se vea poco clara cuando cambia el tamaño de la imagen a un tamaño más grande en el cursor. Si usa la configuración predeterminada de una fila con una columna, la columna máxima será de 1080px. Entonces, uso una imagen que tiene alrededor de 1500 PX de ancho y 900 PX de altura. IMPORTANTE: Por lo general, cuanto más grande sea la imagen, más espacio tendrá para escalar, mover y rotar la imagen sin perder la calidad de la imagen. Agregar las transformaciones de efectos ahora, que tenemos la imagen en su lugar, es hora de usar esas opciones de transformación para crear el efecto del cursor Ken Burns. Cambie a la pestaña Diseño para abrir las opciones de transformación. Habilite los efectos de desplazamiento y seleccione la pestaña Hover. Ahora, cualquier personalización del efecto de transformación solo se aplicará al estado de movimiento del módulo de imagen. Luego, en la pestaña Escala de transformación, actualice lo siguiente: eje x de la escala de transformación (caminata): 136% del eje y de la escala de transformación (caminar): 136%
Luego haga clic en la pestaña Transformación de traducción y actualice lo siguiente: Transforme el eje traducido (lugar con el mouse): 3% Transforme el eje y (traducción): 9% Esto mueve la imagen a la izquierda en un 3% y abajo en un 9% . Para esta imagen específica, estábamos buscando un efecto para aumentar y llevar a la pareja al centro de la ventana de la columna. Por defecto, los valores de la longitud de la traducción estarán en píxeles (no en porcentaje). Puede usar píxeles para mover la imagen, pero creo que el uso de porcentajes hace que el posicionamiento sea más receptivo.

Luego haga clic en la pestaña Transformación de la rotación y actualice lo siguiente: Transformación de rotación X (desplazamiento): 6 gradualmente la función de sincronización que permite que la transición cambie la velocidad durante su duración). Para este ejemplo, quiero que la transición dure más para un efecto más dramático (y clásico) de Ken Burns en el flotador. Para hacer esto, vaya a la pestaña avanzada y actualice las opciones de transición de la siguiente manera: la duración de la transición: 2000 ms (o 2 segundos) la curva de velocidad de transición: lineal (esto garantiza que la velocidad de la transición no cambie en la duración) la final resultado ahora para verificar el resultado final. No se deje engañar por el GIF GIF a continuación. La transición es realmente suave en un sitio en vivo.

Agregar el efecto Ken Burns flotante a varias imágenes seguidas con tres columnas Si desea agregar el efecto Hover Ken Ken a las multi-columnas, se aplica el mismo proceso. Lo principal que debe hacer es asegurarse y agregar el fragmento CSS “Desbordamiento: oculto” a cada una de las columnas que contienen su imagen utilizando el ejemplo anterior anterior, cambie la línea de la fila en un aspecto de tres columnas.
Luego, actualice la configuración de la fila con fragmentos CSS personalizados que ocultarán la superación de cada columna. Columna 1 Artículo principal CSS: Overflow: Oculto; Columna 2 Artículo principal CSS: Overflow: Oculto; Columna 3 Elemento principal CSS: Overflow: Oculto;

Luego copie el módulo de imagen y péguelo en la columna 2 y la columna 3.
Eso es todo. Aquí está el resultado final.

Dado que este diseño es más típico para un aspecto de la cuadrícula de la galería, probablemente desee acelerar la duración de la transición para acentuar la animación con el mouse. Puede hacer esto fácilmente usando la función multiselección de Div. Presione CTRL o CMD y seleccione todos los módulos de imagen. Luego haga clic en la configuración del icono de la rueda en una de las imágenes para abrir la configuración del elemento. Ahora todas las actualizaciones que realice en la configuración del elemento se aplicarán a todas las imágenes simultáneamente. Actualice las opciones de transición desde la configuración del elemento de la siguiente manera: Duración de transición: 500 ms


Aquí está el nuevo tiempo de transición vigente.

Agregar el efecto Ken Burns Hover a cualquier imagen de fondo El efecto Hover Ken Burns se puede usar para módulos distintos del módulo de imagen. Esto funciona bien si desea convertir texto o iconos junto con la imagen de fondo de un módulo. Aquí le mostramos cómo agregar el efecto Ken Burns a un módulo de texto. Primero cree una nueva sección habitual con una fila con una columna. Luego agregue un módulo de texto en una fila.

Actualice el módulo de texto con el siguiente contenido:

Estamos comprometidos!

Luego agregue una imagen de fondo al modo. Recuerde agregar una imagen lo suficientemente grande como para dejar espacio para cambiar el tamaño y mover la imagen.

Y luego actualice las opciones de diseño de título de la siguiente manera: Fuente del título: Prata Tamaño de texto Tamaño: 6VW Reinicio personalizado: 10VW arriba, 10 VW Down, 3VW Duración de transición a la izquierda: 5000 ms

Ahora agregue la siguiente configuración de transformación al módulo de texto. X eje de la escala de transformación (viaje): 118% del eje y de la escala de transformación (caminata): 118% transforma el eje x traducido (lugar con el mouse): 6% transforma el eje traducido (lugar con el mouse): 6 De %

Ahora, actualice la configuración de la fila con el siguiente CSS personalizado para la columna. CSS Elemento principal de la columna: desbordamiento: oculto;

Ahora verifique el resultado.

Observe cómo el texto y la imagen de fondo se convertirán en una carrera. Al combinar el efecto Ken Burns Hover con efectos adicionales de flujo, puede combinar el efecto Ken Burns Hover que se aplica a un efecto adicional para una mayor creatividad. Al combinar el efecto Ken Burns Hover con los efectos del filtro si se olvida de ellos, los efectos del filtro son una excelente manera de agregar un estilo creativo a sus módulos, especialmente en el flotador. Y puede combinar estos efectos de filtro con el efecto de transformación para algunas transiciones flotantes bastante únicas. Para mostrarle, para usar el ejemplo anterior que agregó el efecto Ken Burns a un módulo de texto. Como el módulo de texto ya tiene el efecto de transformarse en posición, agregue un efecto de filtración adicional para cambiar la imagen de blanco y negro. Abra la configuración del módulo de texto y actualice la siguiente opción de filtración: saturación (predeterminado): 0% de saturación (conducción): 100%
Esta transición establecerá el módulo de texto en 0% de saturación por defecto, lo que eliminará el color al hacerlo blanco y negro. Retroceder al 100% para viajar agregará el color original de la imagen. Aquí está el efecto final del efecto de filtro combinado con el efecto Ken Burns Hover.

Combinando el efecto Ken Burns Hover con los efectos de la fila de transformación para este ejemplo, le mostraré cómo combinar el efecto Ken Hover Hover con un efecto de transformación adicional agregado. La idea es usar los efectos de transformación para escalar y rotar la fila al estado predeterminado y luego restaurar el diseño original para una caminata. Nota: Esta técnica funcionará muy bien solo para una fila con una sola columna de módulo. Esto se debe al hecho de que el visitante tendrá que pasar por el camino y alinearse simultáneamente. Por lo tanto, el módulo debe hacerse cargo de toda la altura y el ancho de la fila. Los módulos o espacios adicionales romperán el estado flotante y causarán problemas. Para hacer esto, permaneceremos con el diseño actual del módulo de texto, que ya combina el efecto Ken Burns Hover con un efecto de filtro adicional. ¡Así que este es en realidad un efecto flotante triple! Abra la configuración de fila que contiene el módulo de texto. Luego actualice lo siguiente: trenza personalizada: 0 px arriba, 0 px abajo, 0 px izquierda, 0 px a la derecha es asegurarse de que no haya espacio adicional entre el texto y la fila. A continuación, agregaremos un cuadro en una fila en fila , de la siguiente manera: Box Shadow: Vea la captura de pantalla del poder de la sombra de la caja: 36 PX Sombra Color: RGBA (0.0,0,17)

Ahora agregue los siguientes efectos de transformación: eje x de la escala de transformación (predeterminado): 70% x eje (caminar): 100% eje y de la escala de transformación (predeterminado): 70% de eje de la escala de transformación (caminar): 100 De %

Eje de transformación de rotación Y (predeterminado): 19 grados Rotación de rotación Rotación del eje (movimiento): 0 grados Eje de rotación Z (predeterminado): 23 grados Eje de rotación Z (hover): 0degacum, para verificar el resultado final.

Agregando el efecto Ken Burns flotar a una fila de contenido completa solo si lo pide, el efecto Ken Burns también se puede usar para dar vida a una fila completa en el flotador. Esto no será muy práctico para las filas con mucho contenido, porque será una forma de confundir o distraer a los visitantes. Pero para cosas como encabezados, esta puede ser una técnica de diseño útil. El truco es agregar el fragmento CSS personalizado “desbordamiento: oculto” a la sección. Luego puede agregar los efectos de transformación uno por uno. Pensamientos finales Aunque el efecto Ken Burns ha existido durante algún tiempo, es posible que sea útil para crear efectos flotantes bastante únicos para sus imágenes y módulos de la Divica. El truco es saber cómo usar las opciones de transformación DIV que son sorprendentemente intuitivas. Estos ejemplos dados en este tutorial estaban destinados a introducir el concepto y, con suerte, proporcionar poca inspiración para su propio uso. Cuando piensa en todas las formas en que combina las opciones de transformación con todas las otras opciones de estilo disponibles en la división, comienzan a aparecer toneladas de ideas. Espero tener noticias suyas en los comentarios. ¡Suerte!