Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti üzerinde duruyoruz. Fontu değiştirerek tam anlamıyla bir daktilo efekti de verebilirsiniz. JavaScript TypeWriter efekti, web sayfalarınızın özellikle ana sayfalarına canlılık katabilir.

Olay aslında çok basit. Efektin görünmesini istediğiniz yere bir HTML kod ekliyorsunuz, gerisini JavaScript hallediyor. HTML kodu aşağıda.

<span class="txt-type" data-wait="1000" data-words='["Developer","Designer","Creator","Photographer","Traveller","Blogger"]'></span>

JavaScript kodu da aşağıda. Bu kodu harici bir JS dosyasına ekleyip de çalıştırabilirsiniz, aynı sayfada script etiketleri arasında ekleyerek çalışmasını sağlayabilirsiniz.

class TypeWriter {
	constructor(txtElement, words, wait = 2000) {
	  this.txtElement = txtElement;
	  this.words = words;
	  this.txt = '';
	  this.wordIndex = 0;
	  this.wait = parseInt(wait, 10);
	  this.type();
	  this.isDeleting = false;
	}
  
	type() {
	  const current = this.wordIndex % this.words.length;
	  const fullTxt = this.words[current];
  
	  if(this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1);
	  } else { this.txt = fullTxt.substring(0, this.txt.length + 1); }
  
	  this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
  
	  let typeSpeed = 150;
	  if(this.isDeleting) {
		typeSpeed /= 2;
	  }
  
	  if(!this.isDeleting &amp;&amp; this.txt === fullTxt) {
		typeSpeed = this.wait;
		this.isDeleting = true;
	  } else if(this.isDeleting &amp;&amp; this.txt === '') {
		this.isDeleting = false;
		this.wordIndex++;
		typeSpeed = 500;
	  }
  
	  setTimeout(() =&gt; this.type(), typeSpeed);
	}
  }
 
  document.addEventListener('DOMContentLoaded', init);
 
  function init() {
	const txtElement = document.querySelector('.txt-type');
	const words = JSON.parse(txtElement.getAttribute('data-words'));
	const wait = txtElement.getAttribute('data-wait');
	new TypeWriter(txtElement, words, wait);
  }

Typewriter efektinin hızını ve bir sonraki kelimeye geçerken oluşan bekleme süresini belirleyebiliyorsunuz. TypeWriter class’ının altındaki wait değeri ve typeSpeed değerleri değiştirebileceğiniz değerlerden.