Blogger için HTML CSS ve JavaScript kullanarak Metin Efekti Oluşturma

Bloguma hoş geldiniz, bugünkü yazımda, HTML CSS ve JavaScript kullanarak Blog için güzel yazma efekti kodunu sizinle paylaşacağım. Demoyu aşağıda gösterildiği gibi ve makalenin sonunda görebilirsiniz.

Yazma veya yazma efekti olarak da bilinen metin yazma animasyonu, metnin bir daktilo efekti gibi ve metni silme ve yeniden yazma gibi otomatik olarak değiştiği anlamına gelir.

METİN EFEKT KODLARI

Öncelikle HTML "Örnek" olarak ekleyelim.

123
  <span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>

Şimdi JavaScript Kodunu temanızda bulunan </body> kodunun üzerine gelecek şekilde ekleyin.

1234567891011121314151617
   <script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>

Son olarak aşağıda ki CSS kodunu </head> kodunun üzerine gelecek şekilde ekleyelim.

12345678
      <style>/* <![CDATA[ */
.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}
/* ]]> */</style>

NOT: color:#333ekran metni rengi

color:#4070F4 metin rengi ve yazılan imleçtir

background-color:#ffffffmetni içeren arka plan arka planıyla aynı arka plan rengidir

DEMO