Cómo crear una superposición de imágenes con patrones de animación del desencadenante de texto en la división

La superposición de imágenes sigue siendo un elemento de diseño popular al mostrar imágenes en su sitio web. No solo proporciona una forma creativa de presentar imágenes, sino que también pueden hacer imágenes más divertidas y atractivas para ver visitantes, especialmente al agregar animaciones personalizadas al colocar el cursor o hacer clic en la imagen. En este tutorial, le mostraremos cómo crear una superposición de imagen con animación para activar el texto dividido en el DIV. Primero, le mostraremos cómo crear la imagen personalizada superpuesta con persianas de texto divididas. Luego, le mostraremos cómo puede usar las opciones de transformación incrustadas de la división para crear los tres modelos de disparador de imagen totalmente único. Incluso le mostraremos algunos otros ejemplos de modelos para que esos jugos creativos fluyan.
¡Vamos a saltar y comenzar! Eye es un vistazo rápido a los proyectos para superponer las imágenes en este tutorial. Aquí hay un CodePen que demuestra el mismo diseño utilizado en este tutorial. Descarga el aspecto gratis

Para poner sus manos en los dibujos de animación del desencadenante de texto que superó el texto en este tutorial, primero deberá descargarlos 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.
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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Parte 1: Construcción de imágenes superpuestas con persianas de texto divididas para esta primera parte del tutorial, construiremos la configuración inicial de la superposición de la imagen con las persianas de texto divididas. Una vez hecho esto, podemos agregar animación a las persianas más tarde. La fila para comenzar, agregue una fila con dos columnas a la sección habitual.
Antes de agregar módulos, abra la configuración de la fila y actualice el ancho de la canaleta: el ancho de la canaleta: 2

La actualización de la columna será el contenedor principal que mantendrá nuestra imagen y los elementos de superposición del disparador. También será el objetivo principal que iniciará la animación del obturador durante el viaje. En otras palabras, cuando el cursor se mueve dentro de la columna, la animación de los elementos de los niños (persianas) comenzará y cuando el cursor se mueva fuera de la columna, la animación se detendrá.
Para designar nuestra columna como una “columna de activación” y animarla más tarde “en Salida”, agregue las siguientes columnas CSS a la columna:

Clase CSS: columna de obturador en el balance
Luego actualice los derrames ocultos para que no veamos los elementos transformados una vez que excedan el contenedor de columna durante la animación.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la imagen principal en la columna 1, agregue un módulo de imagen. Esto servirá como la imagen principal que colocaremos detrás de la superposición del obturador.
Cargue una imagen en el módulo de imagen.

Luego establezca la alineación de la imagen en el centro.

Creando el obturador superior con texto ahora dividido que nuestra imagen está en su lugar, agregaremos el disparador superior usando un módulo de texto. Agregue un nuevo módulo de texto debajo de la imagen.

Actualice el contenido del módulo de texto Agregar el texto “Div” al área del cuerpo.

En la pestaña Diseño, actualice el estilo de texto de la siguiente manera:

Texto de fuente: Poppins

Texto de la fuente de peso: duro
Text -Text Style: TT
Color de texto de texto: #ffffff
Tamaño de texto de texto: 200 PX (escritorio), 30 VW (tableta y teléfono)
Texto de la carta de espacio: -0.03em
La altura de la línea de texto: 0 Maliniere Texto: Centro
Luego actualice las opciones de tamaño y espaciado:
Ancho: 100%
Altura: 50%

Marja: 0 px a continuación
En la pestaña avanzada, actualice lo siguiente:
Clase CSS: obturador superior
Usaremos la clase CSS para cambiar la animación de transformación activada y desactivada con nuestro código más adelante. Luego agregue este CSS personalizado al elemento principal: Display: Flex;

Alinine-Ritams: Flex-End;
Justify-Concursing: Centro;
Este código usa Flex para asegurarse de que el texto esté alineado verticalmente en la parte inferior del módulo. Debido a que el texto tiene una altura de línea de 0, el texto se mostrará como dividido, mostrando solo la mitad superior.
Para colocar el obturador de arriba, primero debemos ocultar el texto del texto y luego darle una posición absoluta de la siguiente manera:
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto

Posición: Absoluto
Esto moverá el gatillo sobre la mitad superior de la imagen.
Creando el disparador inferior con el texto dividido por el partido ahora, cuando tenemos la mierda completa, podemos comenzar con la creación del disparador inferior duplicando el módulo de texto del disparador superior.
Luego abra el módulo de texto duplicado y actualice lo siguiente:
Clase CSS: obturador superior

Actualice el elemento CSS principal reemplazando “Flex-End” con “Flex-Start” para la propiedad Align-Ritms. Aquí está la final de CSS:

Pantalla: Flex;
Alinine-ritams: arranque flexible;
Justify-Concursing: Centro;
Con “Flex-start”, el texto está alineado verticalmente en la parte superior del módulo. Y dado que el texto tiene una altura de línea de 0, el texto se mostrará como dividido, mostrando solo la mitad inferior. Luego actualice la posición absoluta con una brecha vertical de la siguiente manera: brecha vertical: 50%
Esto trae el módulo de texto del gatillo para pararse por encima de la mitad inferior de la imagen. El texto dividido de ambas persianas ahora debe alinearse como una combinación perfecta.
En este momento, hemos creado con éxito la configuración para superponer la imagen de activación de texto. Esto consiste en la columna del obturador como un contenedor, la imagen principal, el obturador superior en la mitad superior de la imagen y el obturador inferior en la mitad inferior de la imagen.
Usaremos esto como una especie de plantilla de inicio para los siguientes ejemplos que incluirán animaciones de activación utilizando propiedades de transformación. Parte 2: El código para agregar la funcionalidad de la animación obturadora, necesitamos algunos fragmentos de CSS y JS usando un módulo de código. Agregue un nuevo módulo de código en la página. Podemos agregarlo a la columna derecha de la primera sección superior que utilizamos para nuestra superposición inicial.
CSS STACE Los siguientes CSS en el cuadro de código, asegurándose de envolverlo con las etiquetas de estilo necesarias: / * Duración de transición de la animación de obturador * /
.

.bottom-shutter {

Transición: transformar 1s;


}
/* Deshabilita todas las opciones de transformación creadas en
Builder Divic para ambas persianas */
.Divi-Transform-None.
.Divi-transformform-none .bottom-shutter {
Transformar: ninguno;
}
.al hacer clic {
Cursor: puntero;
}
Este CSS es muy simple. Todo lo que hace es aplicarse para transformar: ninguna en las persianas dentro de la columna con la clase “Div-Transform-None”. Esta clase se activará y deshabilitará con JS para crear animación. Transición: la transformación 1 simplemente establece la duración de la transición (o animación) para durar 1 segundo. JS After CSS, agregue el siguiente jQuery al cuadro de código, asegurándose de envolverlo con las etiquetas de script necesarias: (function ($) {$ (documento) .ader (function () {
/*
Togle Shutter Transform Animation en Hover.
Para trabajar, la columna de la división con persianas debe incluir
Estas clase CSS: “Shoutter-Column en el balón Div-Transform-None”.
*/
$ ShutterColumnToHover = $ (“. Shutter-column.on-over”);
$ ShutterColumnToHover.Hover (function () {
$ (this) .ToglecLass (“Div-Transform-None”);
});
/*
Alternar la animación de transformación del obturador al hacer clic.
Para trabajar, la columna de la división con persianas debe incluir
Estas clase CSS: “SHUTTER-Column en clic Div-Transform-TRANSFORM-NONE”.
*/
$ ShutterColumnToclick = $ (“. Shutter-column.on-click”);
$ ShutterColumnToclick.on (“clic”, funciones (s) {
$ (this) .ToglecLass (“Div-Transform-None”);
E.StopPropration ();
});
$ (documento) .on (“clic”, función (s) {
if ($ (e.target) .is (“. grito-column.on-click”) === falso) {
$ ShutterColumnToclick.addClass (“div-transform-none”);
}
});
});
}) (JQuery);
La primera parte del código agrega la funcionalidad que cambia las animaciones de transformación en el desplazamiento cada vez que una columna tiene las clases “Shoutter-Column on-Hover Divorma-transform-None”. $ ShutterColumnToHover = $ (“. Shutter-column.on-over”);
$ ShutterColumnToHover.Hover (function () {
$ (this) .ToglecLass (“div-transform-none”);});
La segunda parte del código agrega la funcionalidad que cambia las animaciones de transformación del obturador en el clic cada vez que una columna tiene las clases “-columna de obturador para dividir la transformación”.$ ShutterColumnToclick = $ (“. Shutter-column.on-click”);
$ ShutterColumnToclick.on (“clic”, funciones (s) {

$ (this) .ToglecLass (“Div-Transform-None”);
E.StopPropration ();
});
$ (documento) .on (“clic”, función (s) {
if ($ (e.target) .is (“. Shoutter-column.on-click”) === falso) {
$ ShutterColumnToclick.addClass (“div-transform-none”);
}
});
Parte 3: Modelos de animación del Diseño de diseño Diseño # 1 Para crear nuestro primer diseño de animación de activación, comenzaremos el proceso de diseño duplicando la primera sección.Esto nos dará una nueva sección con una superposición de imagen preconstruida con las persianas de texto divididas listas para comenzar.
Agregue las propiedades de transformación al desencadenante superior normalmente, cuando se usa CSS para animar algo con propiedades de transformación, el elemento no tendrá inicialmente un estilo de transformación y luego el estilo de transformación se habría aplicado cada vez que el usuario pase o haga clic en elementos. En DIV, devolveremos el proceso y comenzaremos agregando el estilo de transformación al elemento utilizando First Divic Builder. Esto nos permite usar las opciones de transformador incorporadas mientras editamos visualmente el diseño. Luego, una vez que hayamos terminado de agregar todos los elementos de diseño de transformación, inicialmente podemos desactivarlos (usando una clase CSS) y luego podemos cambiarlo y desactivarlo cuando el usuario interactúe con superposición. Para agregar el diseño de la transformación al activador superior, abra la configuración del texto del disparador superior y actualice lo siguiente: la escala de transformación (x e y): 150%
Transformar el eje Y traducido: -101%
Transformar origen: Center de sus
Si lo hizo correctamente, el disparador superior ya no será visible, lo que queremos, porque queremos que toda la imagen principal se expone después de la transición de la animación. Agregue las propiedades de transformación al activador inferior para el disparador inferior, actualice las siguientes opciones de diseño de transformación:
Escala de transformación (x e y): 150%
Transformar el eje Y traducido: 101%

Origen de giro: el centro inferior
Agregue una clase para deshabilitar inicialmente los modelos de transformación como mencionamos anteriormente, una vez que tenemos que agregar los modelos de transformación necesarios para la animación del obturador, inicialmente podemos desactivar estos modelos de transformación agregando un CSS. Debido al código CSS personalizado que lo agregué que lo agregué. Anteriormente, el diseño aparecerá sin tener modelos de transformación en su lugar. Agregue la funcionalidad para hacer clic con una sola clase para obtener la misma animación activada para hacer clic en lugar de colocar, solo debemos reemplazar una sola clase en la columna. En primer lugar, copie la columna 1 con nuestro primer ejemplo en Hover. Luego borre la columna vacía. Ahora debe tener dos columnas idénticas a las mismas clases y contenido. Abra la configuración para la columna 2 y reemplace la clase “en el balance” con la clase “en el clic”. Esto es lo que deberían ser las últimas tres clases:
Clase CSS: Shutter-Column al hacer clic en Div-Transform-None
Reversión de resultados de la animación de obturador en flotación Si desea que la imagen principal se muestre inicialmente no cubierta y luego agregue superposición cuando pase con el mouse sobre la imagen (el reverso de la forma en que funciona ahora), puede eliminar el “div Div -Antansform-None “de la columna utilizada para el obturador. Esto te dará el próximo efecto. Diseño # 2 Para crear la segunda animación de activación, podemos usar la sección duplicada anterior con nuestra primera animación de activación. Actualice las persianas y luego use el múltiple selección para seleccionar los módulos de activación superior e inferior. Luego abra la configuración del elemento para ambos y actualice lo siguiente:

Antecedentes: #ffffff
Color de texto de texto: # 000000
Modo de mezcla: Diseño de pantalla # 3 Para crear el tercer diseño de la imagen de animación del obturador, copie la sección anterior. Agregue una nueva imagen y luego actualice el módulo de imagen con una nueva imagen.
Actualice las persianas Use la elección multises para seleccionar módulos de activación de activación superior e inferior y abra la configuración del elemento para actualizar lo siguiente:


Contenido del cuerpo: D

Antecedentes: RGBA (0.0,0,0,9)
Color de texto de texto: #ffffff

Tamaño de texto de texto: 450 PX (escritorio), 70 VW (tableta y teléfono)
Modo de mezcla: multiplicación
Abra Configuración Configuración del módulo de activación superior y actualice las siguientes opciones de transformación:
Escala de transformación (x e y): 100% (predeterminado)

Transformar el eje Y traducido: -101%

Rotar el eje de transformación Z: -45 grados
Turns Origin: izquierda superior

Luego actualice la configuración del módulo de activación inferior y actualice las siguientes opciones de transformación:
Escala de transformación (x e y): 100% (predeterminado)
Transformar el eje Y traducido: 101%
Rotar el eje de transformación Z: -45 grados

Turns Origin: la parte inferior derecha