JS ile input[placeholder] Yazı Efekti

• 5,518 Kez Okundu
• Html Css Js
• 0 Yorum
• 2020-01-04 07:31:38

Projelerinizde kullanabileceğiniz, özellikle de arama kutucuklarınızda kullanmayı isteyeceğiniz hoş bir yazı efekti yapalım.

Öncelikle bir input oluşturup içerisine bir class atayalım.

<input type="text" class="searchBox">

Ben class ismini searchBox olarak kullandım. İleride yazacağımız kodlarda buna dikkat edelim.

Şimdi javascript kodlarımıza geçelim.

obj = {
	searchTxt: [
		"Merhaba, Hoşgeldiniz. ",
		"Ne Aramıştınız ? ",
		"Aradığınızı Birlikte Bulalım :) "
	],
	hasFocus:false
}
// Burada obje tanımladık ve iki adet özellik atadık.

if(obj.searchTxt !== null && obj.searchTxt !== "undefined"){
	var i = 0, ct = 0, searchBox = document.querySelector(".searchBox"); obj.typeIt;
//Kullanacağımız inputu bulduk ve değişkenlerimizi atadık.

	function type(){
		obj.typeIt = obj.searchTxt[ct].slice(0, ++i);
		if(obj.typeIt === obj.searchTxt[ct]){
			i = 0;
			if(ct === obj.searchTxt.length-1){
				ct = 0;
			}else{
				++ct;
			}
			return;
		};
		searchBox.setAttribute("placeholder", obj.typeIt);
		setTimeout(type, 80);
	};
	type();
//Obje nin içinde bulunan cümleleri birer harf kaydırarak placeholder içine yazıyoruz. 
//Her 80 ms de bir bu işlemi yapıyoruz.

    
	$(window).on({
		focus: function(){ obj.hasFocus = true; },
		blur: function(){ obj.hasFocus = false; }
	}).trigger("focus");
//pencere odaklandığında yazma işlemi devam ediyor odaktan çıktığında ise yazma işlemi duruyor.

    setInterval(function(){
        if(obj.hasFocus){
        	type();
        };
    }, 10000);
//odak işemi değişim süresini ve sonraki cümleye geçiş süresini de 10000 ms olarak kontrol ediyoruz.
};

Tüm işlemlerimiz bu kadar. Yazdıklarımızı özetleyecek olursak; obje içine tanımladığımız cümlelerimizi sayfa yüklendiğinde veya input odaklandığında her harfi tek tek kaydırarak placeholder içine 80 ms aralıklarla yazmış oluyoruz, cümleler arası geçiş süremiz 10000 ms yani 10 sn olarak belirledik.

Faydalı olması dileğiyle...

Sevgiyle ve Bilgiyle Kalın ;)