O mascaramento de texto foi uma técnica bastante popular em 2018. Os desenvolvedores experimentaram várias camadas (a mais popular, é claro, o fundo do vídeo) e fontes diferentes.
Hoje estamos testemunhando uma diminuição no uso, porque existem muitas outras opções. No entanto, ainda é impressionante e permite que você crie algo incrível sem esforço. Por exemplo, basta dar uma olhada no Stratego Branding:
Aqui, a equipe de design usa mascaramento para tornar o lema mais pesado, mais forte e mais atraente.
O Stratego Branding é um exemplo representativo de um site que transforma a simplicidade da solução em uma vantagem. O site deles é elegante, forte e profissional. E com tudo isso, ele tem carisma e personalidade. Bem feito.
Portanto, se você deseja estabelecer serenidade em uma área de origem, mas não quer que seja tudo estático, excessivamente simplificado e chato, o mascaramento de texto é uma solução viável. E para começar bem nesta área, explore esses fantásticos trechos de código. Os desenvolvedores compartilham diferentes experiências com o público, fascinando-os com idéias interessantes e soluções práticas.
Máscara de texto SVG com preenchimento de vídeo de Dudley Storey
O primeiro de nossa coleção é um clássico absoluto nessa direção. Vimos esse efeito milhões de vezes e o Dudley Storey nos mostra como recriá-lo com a ajuda de HTML, SCSS e um pouco de JavaScript. Esta caneta é editável para que você possa brincar com ela. No fundo, você encontrará um vídeo HTML5.
Mascarar imagem com texto svg
Outro clássico absoluto é apresentado nesta caneta esferográfica construída por Jesús Gracia. É aqui que a imagem mascarada e o texto SVG andam de mãos dadas. Como resultado, podemos desfrutar de um tipo de letra personalizado fantástico. As letras parecem excepcionais. O artista usa o trio comprovado de HTML, CSS e JS. A solução é um excelente ponto de partida para quem deseja recriar o efeito visto na tela inicial da marca Stratego.
Efeito Máscara de Alex
O efeito de máscara de Alex é baseado em um efeito de rolagem. É uma realização CSS pura, o que significa que é leve e rápido. A solução permite que os visitantes aumentem e diminuam o tamanho das letras. Use o mesmo background ao longo do projeto para produzir um resultado interessante. Observe que, no momento da redação deste documento, o efeito funciona melhor no Chrome.
Animação de máscara de fonte CSS3 por Wifeo
Se você deseja outras realizações CSS3 puras, a animação de máscara de fonte CSS3 do Wifeo é um projeto do qual você pode se inspirar. O artista usa apenas HTML e CSS para obter esse efeito fantástico. Novamente, convém ver isso no Chrome para obter um efeito completo.
Máscara de desfoque
Para tornar as coisas mais interessantes, você pode facilmente misturar a solução acima com alguns modos de mesclagem. Por exemplo, você pode usar um efeito de desfoque como Matt DesLauriers. Sua máscara de desfoque é simplesmente incrível. O artista aproveita uma tela muito desfocada e uma máscara de texto que é limpa como um apito. Parece moderno e elegante.
Máscara de animação com GSAP e SVG de Martí Fenosa
Marti Fenosa vai um pouco mais longe com o conceito, carregando-o com a magia GSAP. Usando SVG e transições de máscara, Marti conseguiu dar ao texto um comportamento encantador que mostra e oculta as palavras de maneira divertida. Novamente, este exemplo fica melhor no Chrome.
Fotos e vídeos são duas opções populares quando se trata de mascarar; no entanto, isso não significa que você esteja limitado apenas a esses dois. De fato, você tem outras opções viáveis, como gradientes.
Máscara de gradiente animada MahdIM SVG +
Essa é a maneira mais simples de usar mascaramento e gradiente, mas ainda funciona. O autor combina gradientes animados e skins SVG sem usar nenhuma mágica do JavaScript. Simples, mas elegante e atraente. Pode ser um toque final perfeito para vários projetos.
Inclui a máscara de texto Granim.js. por Miles Manners
Como no exemplo anterior, um gradiente é usado aqui para enriquecer as formas das letras. O Miles Manners usa o Granim.js para gerar a máscara. Você pode brincar com as configurações, alterar a fonte, o tamanho e, claro, o texto. A solução pode ser facilmente usada em seu projeto – basta visitar a página oficial para obter todos os detalhes.
Máscara SVG animada por DroidPinkman
O artista mostra o que pode ser feito ajustando um pouco as coisas e usa um gradiente para mostrar / ocultar o texto em vez de preencher símbolos.
Máscara de texto com snap.svg por Rachel Smith
Outra alternativa para vídeos e imagens pode ser a animação. Dê uma olhada no mascaramento de texto com snap.svg, de Rachel Smith. O trabalho de Rachel é maravilhoso. É tão divertido que você deseja levá-lo com você e usá-lo em seu projeto imediatamente. Aqui, quase tudo é feito com a ajuda do Snap.svg.
Animação de máscara de vídeo SVG – ScrollMagic & Greensock por Susan Lee
Parece familiar para você? Aposto que a primeira coisa que vem à mente é uma promoção icônica para iPhone da Apple. E você está certo. Susan Lee criou uma réplica usando SVG, GSAP e ScrollMagic. Puro, espirituoso e refinado.
Preenchimentos de texto animados por Tympanus
Este é um lugar para cavar e apreciar toda a beleza e potencial escondido dentro. Yoksel, o autor dessas demos incríveis e o tutorial que acompanha, experimentou CSS e SVG. O resultado são quase uma dúzia de soluções com preenchimentos e traçados animados usados em letras simples.
O que está por trás da máscara?
O mascaramento de texto não é tão simples quanto parece à primeira vista. Eles são todos diferentes. Sim, muitos desenvolvedores preferem usar fundos de vídeo, mas ainda assim eles diferem um do outro. Muitos truques tornam essa solução única: efeitos de rolagem de paralaxe, gradientes, animações etc.
Misturar e combinar várias técnicas permite que os desenvolvedores realizem fantásticas realizações, que não sobrecarregam os visitantes nem pesam no site. A máscara de texto é uma maneira elegante, simples e testada pelo tempo de transformar slogans ou slogans na estrela do programa.
