Connection Information

To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not your credentials, you should your web host.

Connection Type

Connection Information

To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not your credentials, you should your web host.

Connection Type

▷ 10 snippets CSS e JS para criar efeitos impressionantes de mascaramento de texto

10 snippets CSS e JS para criar efeitos impressionantes de mascaramento de texto

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:

Marca Stratego

Aqui, a equipe de design usa mascaramento para tornar o lema mais pesado, mais forte e mais atraente.

  • Eles conseguiram transformar três palavras simples no foco de atenção, separando-o facilmente do plano de fundo e do conteúdo. “Mude o jogo” é a primeira coisa que você nota.
  • Eles recriaram a atmosfera atlética usando uma imagem de fundo adequada, sem sobrecarregar os visitantes.
  • Eles aprimoraram visualmente a metáfora do esporte, fazendo uma declaração adequada. Isso não é tudo. A máscara também é usada para enriquecer a exibição dos trabalhos do portfólio, completando o design.
  • 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.

    Preenchimentos de texto animados por Tympanus

    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.