ASSINATURA AUTOMÁTICA

Fala blog tudo de buenas?

Estava dando uma olhada nos blogs da comunidade e vi um post do Cosmoliko, tentando criar uma assinatura animada para o blog dele. Na hora me bateu a ideia e fui recorrer ao meu fiel escudeiro Gemini para me ajudar nessa missão. O objetivo era criar algo legal para o final das postagens — e acho que deu certo!

Vale lembrar que testei o código na plataforma Blogger. Bora ver como ficou?

PASSO 01: Copie todo código abaixo, e cole no editor HTML da sua postagem;

 

Código HTML / SVG

<!-- Importa a fonte Great Vibes -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

  .sig-box {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .sig-font {
    font-family: 'Great Vibes', cursive;
    font-size: 38px;
    fill: #1a237e;
  }

  .reveal-mask {
    transform: translateX(-100%);
  }

  .animate-sig {
    animation: typeWrite 3.2s steps(26) forwards;
  }

  @keyframes typeWrite {
    from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
  }
</style>

<div class="sig-box" id="sigTrigger">
  <svg width="450" height="60" viewBox="0 0 450 60" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="sigClip">
        <rect id="sigMask" x="0" y="0" width="450" height="60" class="reveal-mask" />
      </clipPath>
    </defs>
    <text x="5" y="45" class="sig-font" clip-path="url(#sigClip)">Escrito por: Willian Ernani</text>
  </svg>
</div>

<script>
  (function() {
    const target = document.getElementById('sigTrigger');
    const mask = document.getElementById('sigMask');

    if (target && mask) {
      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            mask.classList.add('animate-sig');
            obs.disconnect();
          }
        });
      }, { threshold: 0.4 });

      observer.observe(target);
    }
  })();
</script>

PASSO 02: Personalização:

a) Substitua o trecho https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap pelo link da fonte que você escolher, no Google Fonts;   E, substitua o nome dela aqui também: font-family: 'Great Vibes', cursive;

b) Substitua a cor da fonte alterando o código hexadecimal no trecho:     fill: #1a237e;

Pronto, sua postagem já tem uma assinatura "animada". Não está perfeita, mas já é um ótimo quebra galho! Veja abaixo, como ficou.

Blog e leitores, antes de saírem, dêem uma olhadinha nos meus outros cantos dessa interneta - é só navegar até a página BLOGROLL. Tem alguns blogs que sigo lá também bem legais! Garanto que não vão se arrepender.

Então pessoal, foi esse o post. Espero que tenham gostado. Um grande abraço, e, até o próximo!