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.