Merhabalar,

Bu yazımda, Javascript ile yazıya yazma ve silme animasyonu oluşturmaktan bahsedeceğim. Özellikle modern ve yaratıcı sitelerde sıkça karşılaştığım bu etkiyi siz de kendi sitenize kolaylıkla entegre edebilirsiniz.

HTML Yapısı

<div class="animation_text">
  <h1>Ben web <span class="typewrite" data-period="2000" data-words='[" Geliştiricisiyim.", " Tasarımcısıyım.", " Uzmanıyım."]'></span></h1>
</div>

data-words: Gösterilecek kelimeleri içerir (dizi formatında).
data-period: Her kelimenin ekranda kalma süresini belirtir (milisaniye).

CSS Stili

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

.animation_text h1 {
  font-family: "Poppins", sans-serif;
  text-align: center;
  color: #373150;
  font-size: 60px;
  font-weight: 500;
  line-height: 70px;
}
.animation_text h1 span {
  color: #56A274;
}
@media(max-width:768px) {
  .animation_text h1 {
    font-size: 30px;
  }
}

Javascript Kodları

var Text = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

Text.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = ''+this.txt+'';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-words');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new Text(elements[i], JSON.parse(toRotate), period);
    }
  }
};

Yukarıdaki kodları HTML dosyanıza ekleyerek animasyonu çalıştırabilirsiniz. Canlı örneğini CodePen üzerinden görebilirsiniz.

Mutlu Kodlamalar! ????