homefinance blog
Los modelos de máscara de texto son sorprendentemente fáciles de crear utilizando las opciones incrustadas del div. El constructor tiene todos los ingredientes para crear un efecto de máscara de texto, incluidas las opciones para estilos de texto, fondos y modos de mezcla. De hecho, hemos creado modelos de texto antes de usar los modos de mezcla. Pero, con los efectos de desarrollo, podemos llevar los proyectos de máscaras de texto a un nuevo nivel. En este tutorial, le mostraremos cómo diseñar un texto con animación de fondo en el desplazamiento en Div. El diseño es único, y el efecto de desarrollo lo hace cobrar vida. ¡Vamos a empezar! Lleva un ojo sobre los proyectos que construiremos en este tutorial.
Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, 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.
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! Para importar la sección de la sección en la Biblioteca Divic, navegue a la Biblioteca de Divic. 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. Diseñando un texto con animación de fondo en la división Agregar fila para iniciar cosas, agregue dos columnas a la sección predeterminada habitual.
Actualice la configuración de la sección antes de agregar módulos, abra la configuración de la sección y actualice el color de fondo y el revestimiento de la siguiente manera:
Color de fondo: # 750046
Forro: 0 px arriba, 0 px abajo
Actualice la configuración de la fila después de que se realice la configuración de la sección, abra la configuración de la fila y actualice la siguiente configuración de diseño:
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Es importante establecer el ancho de la canaleta en 1 y el ancho al 100%, porque usaremos la unidad de longitud VW para nuestro texto cuando creemos el diseño de la máscara de texto. Debido a que la unidad de longitud VW se basa en el ancho del navegador, es importante que los contenedores principales (sección y fila) tengan el mismo ancho que el navegador, que es 100%. Columna 1). Debemos agregar un color de fondo a la columna, de modo que los modos de mezcla que agregamos a la imagen y el texto para mezclar / revelar este color. También debemos establecer el vertido en el oculto, de modo que cuando animamos la imagen en el pergamino, no vemos la imagen desbordante fuera de la columna. Abra la configuración para la columna 1 y actualice lo siguiente:
Color de fondo: # 750046
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Creando la máscara de texto para crear la máscara de texto, agregue un módulo de texto en la columna 1.
El contenido del texto luego agrega la palabra “div” al contenido del cuerpo. Usamos una palabra de 4 letras para que se apilara uniformemente para un diseño cuadrado.
Fondo de texto y luego agregue un color de fondo blanco al módulo de texto.
Color de fondo: #ffffff
Diseño de texto Entonces, en la pestaña Diseño, actualice lo siguiente:
Texto de fuente: Rubik Mono One
Texto de fuente de estilo: TT
Color de texto de texto: # 000000
Tamaño de texto de texto: 25VW (escritorio), 50VW (tableta y teléfono)
La altura de la línea de texto: 0.8em
Alineación de texto: Centro
Junta: 8VW arriba, 8VW abajo
Mod de mezcla de texto Para completar el diseño de la máscara de texto, agregue el siguiente modo de mezcla:
Modo de mezcla: pantalla
Hasta ahora, los cuatro ingredientes clave para este efecto de máscara de texto son los siguientes: el fondo de la columna
Fondo de texto blanco
Texto negro
Pantalla de mezcla de mod en el módulo de texto
La forma de mezclar la pantalla multiplica las capas y produce una versión más fácil de la mezcla. Con la forma de mezclar la pantalla, el texto negro se vuelve completamente transparente, revelando lo que está detrás de ella, que en este caso es un color de fondo.
Agregue una imagen de fondo para agregar la imagen de fondo a la máscara de texto, crear un nuevo módulo de imagen y cargar una imagen de aproximadamente 1700 x 2500 bolígrafo. El tamaño de la imagen es importante para que la imagen cubra la altura y el ancho de la columna vertebral.
Diseño de imagen y luego actualice la siguiente configuración de diseño:
Fuerza el ancho completo: si
Modo de mezcla: pantalla
Este modo de mezcla no es necesario para el efecto de máscara de texto, pero combina la imagen con el color de fondo, de modo que mejor se adapte al diseño. La posición de la imagen luego, le dé a la imagen una posición absoluta y actualice el índice Z para que esté detrás del módulo de texto.
Posición: Absoluto
IND ÍNDICE: -1
Efectos del curso de imagen Una vez que el diseño de la imagen está listo, acceda a la pestaña avanzada y actualice el efecto de ejecución de la siguiente manera:
Debajo de la pestaña de movimiento vertical,
Comenzando el desplazamiento: -1 (al 0%)
GAPACIÓN PROMEDIA: 0 (al 50%)
Compensación final: 1 (al 100%)
Debajo de la pestaña de movimiento horizontal,
Comenzando el desplazamiento: -0.5 (al 0%)
GAPACIÓN PROMEDIA: 0 (al 50%)
Compensación final: 0.5 (100%)
Debajo de la pestaña de escala superior y descendente,
Escala inicial: 110% (al 0%)
Escala promedio: 125% (al 50%)
Escala de conclusión: 140% (al 100%)
El resultado puede agregar algunos bordes superior e inferior a la sección, para que pueda verificar el resultado hasta ahora. Creando el texto falso en la columna derecha, agregue un nuevo módulo de texto. Actularice el contenido del cuerpo con lo siguiente:
lorem ipsum dolor sitt
lorem ipsum dolor sit amet, consecuencia adipiscing elit, sed do eiusmod tempor incididunt Ut labore et dolore magna aliquua. UT enim ad DUI Autoros Doilor en la representación de Volupted Velit Esse Cillum Dolore I Fule Nulla Paratur.
Luego actualice la configuración de diseño de texto de la siguiente manera:
Color de texto: Abierto
2 Sección de fuentes: Rubik
Rúbrica 2 Dimensión de texto: 4VW
Forro (escritorio): 16VW arriba, 5VW a la izquierda, 5VW a la derecha
Revestimiento (tableta): 16VW arriba, 16 VW hacia abajo, 5 VW a la izquierda, 5VW a la derecha
Opciones opcionales de fondo negro / opción de texto Si desea usar un fondo negro para la máscara de texto, todo lo que tiene que hacer es actualizar las tres opciones clave que componen el efecto de enmascaramiento de texto. Abra la configuración del módulo de texto y cambie lo siguiente:
Color de fondo: # 000000 (negro)
Color de texto de texto: #ffffff (blanco)
Modo de mezcla: multiplicación
