10 fragmentos de CSS y JS para crear impresionantes efectos de enmascaramiento de texto

El enmascaramiento de texto fue una técnica bastante popular en 2018. Los desarrolladores experimentaron con varias capas (la más popular fue, por supuesto, el fondo de video) y diferentes tipos de letra.

Hoy estamos presenciando una disminución en el uso porque hay muchas otras opciones. Sin embargo, sigue siendo impresionante y te permite crear algo increíble sin esfuerzo. Por ejemplo, solo eche un vistazo a Stratego Branding:

Marca Stratego

Aqu√≠, el equipo de dise√Īo utiliza el enmascaramiento para hacer que el lema sea m√°s pesado, m√°s fuerte y m√°s atractivo.

  • Se las arreglaron para hacer de tres palabras simples el foco de atenci√≥n, separ√°ndolo f√°cilmente del fondo y el contenido. “Cambiar el juego” es lo primero que notas.
  • Recreaban la atm√≥sfera atl√©tica utilizando una imagen de fondo adecuada sin abrumar a los visitantes.
  • Mejoraron la met√°fora deportiva visualmente haciendo una declaraci√≥n adecuada. Eso no es todo. El enmascaramiento tambi√©n se utiliza para enriquecer la visualizaci√≥n de trabajos de cartera, completando el dise√Īo.

Stratego Branding es un ejemplo representativo de un sitio web que convierte la simplicidad de la solución en una ventaja. Su sitio web es elegante, fuerte y profesional. Y con todo eso tiene carisma y personalidad. Bien hecho.

Por lo tanto, si est√° buscando establecer la serenidad en un √°rea de origen pero no desea que sea todo est√°tico, demasiado simplificado y aburrido, el enmascaramiento de texto es una soluci√≥n viable. Y para un buen comienzo en esta √°rea, explore estos fant√°sticos fragmentos de c√≥digo. Los desarrolladores comparten diferentes experimentos con el p√ļblico, fascin√°ndolos con ideas interesantes y soluciones pr√°cticas.

M√°scara de texto SVG con relleno de video por Dudley Storey

El primero de nuestra colección es un clásico absoluto de esta dirección. Hemos visto este efecto millones de veces y Dudley Storey nos muestra cómo recrearlo con la ayuda de HTML, SCSS y un poco de JavaScript. Este bolígrafo es editable para que pueda jugar con él. En el fondo encontrarás un video HTML5.

Imagen de enmascaramiento con texto svg

Otro cl√°sico absoluto se presenta en este bol√≠grafo construido por Jes√ļs Gracia. Es aqu√≠ donde la imagen de enmascaramiento y el texto SVG van de la mano. Como resultado, podemos disfrutar de un tipo de letra personalizado fant√°stico. Las letras se ven excepcionales. El artista utiliza el tr√≠o probado de HTML, CSS y JS. La soluci√≥n es un excelente punto de partida para aquellos que desean recrear el efecto que se ve en la pantalla de inicio de Stratego Branding.

Efecto de m√°scara de Alex

El efecto de máscara de Alex se basa en un efecto de desplazamiento. Es una realización pura de CSS, lo que significa que es ligera y rápida. La solución permite a los visitantes acercar y alejar las letras. Utiliza el mismo fondo en todo el proyecto para producir un resultado interesante. Tenga en cuenta que, a partir de este escrito, el efecto funciona mejor en Chrome.

Animación de máscara de fuente CSS3 por Wifeo

Si estás preparado para otras realizaciones CSS3 puras, entonces la animación de máscara de fuente CSS3 de Wifeo es un proyecto del que puedes inspirarte. El artista usa solo HTML y CSS para lograr este fantástico efecto. Nuevamente, querrás ver este en Chrome para un efecto completo.

M√°scara de desenfoque

Para hacer las cosas más interesantes, puede mezclar fácilmente la solución anterior con algunos modos de fusión. Por ejemplo, puede usar un efecto de desenfoque como lo hizo Matt DesLauriers. Su Blur Mask es simplemente increíble. El artista aprovecha un lienzo muy borroso y una máscara de texto que está limpia como un silbato. Se ve elegante y elegante.

Máscara de animación con GSAP y SVG por Martí Fenosa

Marti Fenosa va un poco m√°s all√° con el concepto al cargarlo con magia GSAP. Utilizando SVG y transiciones de m√°scara, Marti ha logrado darle al texto un comportamiento encantador que muestra y oculta las palabras juguetonamente. Una vez m√°s, este ejemplo se ve mejor en Chrome.

Las imágenes y los videos son dos opciones populares cuando se trata de enmascarar; sin embargo, no significa que esté limitado solo a estos dos. De hecho, tiene otras opciones viables como, por ejemplo, gradientes.

M√°scara SVG + degradado animado de MahdIM

Esta es la forma m√°s simple de usar el enmascaramiento y un degradado, pero a√ļn funciona. El autor combina gradientes animados y m√°scaras SVG sin usar ninguna magia de JavaScript. Simple, pero elegante y llamativo. Puede ser un toque final perfecto para numerosos proyectos.

Incluye enmascaramiento de texto Granim.js por Miles Manners

Al igual que en el ejemplo anterior, aqu√≠ se usa un degradado para enriquecer las formas de las letras. Miles Manners usa Granim.js para generar la m√°scara. Puedes jugar con la configuraci√≥n, cambiar la fuente, el tama√Īo y, por supuesto, el texto. La soluci√≥n se puede usar f√°cilmente en su proyecto: solo visite la p√°gina oficial para obtener todos los detalles.

M√°scara SVG animada por DroidPinkman

El artista muestra lo que se puede hacer si modifica un poco las cosas y usa un degradado para mostrar / ocultar texto en lugar de llenar los símbolos.

Enmascaramiento de texto con snap.svg por Rachel Smith

Otra alternativa a los videos e imágenes puede ser la animación. Eche un vistazo al enmascaramiento de texto con snap.svg por Rachel Smith. El trabajo de Rachel es maravilloso. Es tan divertido y divertido que quieres llevarlo contigo y usarlo en tu proyecto de inmediato. Aquí, casi todo se hace con la ayuda de Snap.svg.

SVG Video Mask Animation – ScrollMagic & Greensock por Susan Lee

¬ŅTe resulta familiar? Apuesto a que lo primero que viene a la mente es una ic√≥nica promoci√≥n de iPhone de Apple. Y usted tiene raz√≥n. Susan Lee cre√≥ una r√©plica usando SVG, GSAP y ScrollMagic. Aseado, ingenioso y refinado.

Rellenos de texto animado por Tympanus

Este es un lugar para excavar y disfrutar de toda la belleza y el potencial escondido dentro. Yoksel, el autor de estas incre√≠bles demostraciones y el tutorial que lo acompa√Īa, ha experimentado con CSS y SVG. El resultado es casi una docena de soluciones con rellenos animados y trazos utilizados dentro de letras simples.

Rellenos de texto animado por Tympanus

¬ŅQu√© hay detr√°s de la m√°scara?

El enmascaramiento de texto no es tan simple como puede parecer a primera vista. Todos son diferentes S√≠, muchos desarrolladores prefieren usar fondos de video, pero a√ļn as√≠, difieren entre s√≠. Muchos trucos hacen que esta soluci√≥n sea √ļnica: efectos de desplazamiento de paralaje, gradientes, animaciones, etc.

Mezclar y combinar varias técnicas permite a los desarrolladores realizar fantásticas realizaciones, que no abruman a los visitantes ni pesan sobre el sitio web. El enmascaramiento de texto es una forma elegante, simple y probada en el tiempo de transformar lemas o lemas en la estrella del espectáculo.