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.

Javascript Typewriter Effect

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.

Popular Eğitimler

Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

CSS ile tam sayfa arkaplan nasıl yapılır? Üstelik bu tam ekran arkaplanın, ekran boyutuna göre otomatik olarak genişleyip daralması da CSS’in arkaplan özelliği ile mümkün.

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi…

CSS Yazı Tipi (Font) Özellikleri

Paragraflarda, başlıklarda, sayfa içerisindeki metinlerde yazı tiplerine nasıl müdahale edebileceğimiz, herhangi bir…

Google PageSpeed’de Web Yazı Tipi Yüklemesi Hatası Çözümü

Web sitenizi Google PageSpeed’de test ederken karşılaşılan sorunlardan biri yazı tipi yüklemesi…

Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…

CSS ile Resim Nasıl Kırpılır?

Resimleri tasarımlarınıza uyarlamak için bazen kırpmanız gerekebiliyor. CSS ile resimleri kırpmadan, kırpılmış…