JS ile input[placeholder] Yazı Efekti

JS ile input[placeholder] Yazı Efekti

  • 565 Kez Okundu
  • Html Css Js
  • 0 Yorum
  • 2020-01-04 10: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 ;)

Henüz kimse yorum eklememiş

YORUM YAPMAK İSTER MİSİN?

    Önerilen Video
    Sponsor Reklamlar
    Son Yorumlar
    Etiket Bulutu
    C#PopupFormOtomatikProgramBaşlatmaBaşlangıçBasitEkran Koruyucuc#ekran görüntüsümail göndermeexedllbirleştirmekIL MergePhpMSSQL BAĞLANTIGerçekIPRealTextBinaryConvertÇalışmaSüreHesaplamakBulmakCssjQueryHtmlScroll TopYukarı ÇıkOnMinimizeControlBoxSimge DurumunaKüçültInternetGetConnectedStateİnternetBağlantıKontrolŞifre MatikPassword GeneratorHash ŞifrelemeMD5SHA1SHA256SHA384SHA512Asimetrik ŞifrelemeRSASimetrik ŞifrelemeKriptoŞifrelemeAlgoritmaDESRC2RijndaelTripleDESKeyLogKlavye DinleTuş YakalamaGlobal HookDialogResultÇıkış MesajıUyarı MesajıFormClosingMySQLConnector/NetKullanımSoruCheckBoxListViewÇoklu SilmebiosdramexploitkontrolgüvenlikinteljavascriptrowhammerscriptPHPAdmin PanelResponsiveXtbadminFreeÜcretsizWifiWirelessKeysŞifreAnahtarPasswordKablosuz AğDepolamaŞifreler NeredeKablosuz ŞifreAndroidTelefonNasılYazılırProgramlama DiliHesap MakinesiSEONedirNasıl YapılırAnalizGoogleLinkÖzgünMobilKonuResim Robots.txtSite MapŞifreli GirişŞifreli FormŞifre KoymaŞifreli AçılışCompilingDebuggingDerlemeKarma ModMixed ModeApp.ConfigKurbanBayramMübarek OlsunBlogScriptYonetimAdminPanelText EditorMSHTMLEditorYazıDüzenleyiciEasyAppKolayUygulamaÇalıştırmaAkıllı TelefonKlavyeiOSKeyboardEl YazısıCalculatorMyScriptHand WritingDosya YöneticisiFile ExplorerFTPBluetoothRootTask ManagerGörev YöneticisiSystemTargetWeb Application PentestErrorShowHideHataGösterGizlePDOSelectInsertUpdateDeleteConnectSeçimEklemeSilmeGüncellemeMsSQLVeritabanıÇeviriçiDatabaseConverterDbConvertMaskeli IPGerçek IPTarayıcı Tespitİşletim Sistemi TespitTekil Ziyaretçi BilgileriAktif Ziyaretçi BilgileriZiyaretçi SayacıVirüsTemizlemeFirewallServiceSecurityServiceTimeServicePentestGüvenliksızma TestiuniscanwindowslinuxperlDosyaKlasörListelemekFileFolderListInternetDownloadUploadSpeedMonitorServisMsconfigStartupRunServiceIOSMatematikDenklemÇözümKameraKablosuzinternetHotspotPaylaşımAyarlarKaliLinuxSharedTerminalÖsymDuyuruTimeTimeZoneDateZamanTarihdate()time()FreelancerSerbestÇalışanJobsİşlerWebSiteVersionSürümGeçişUbuntuSunucuApachephpinfo()phpversion()FonksiyonHerseyiKopyalacopyallcopySızma TestiSQLMapWindowsPython810HotSpotWi-FiWlannetshhostednetworkAutoWlanJsGeri SayımTextAreaOtomatik KayıtSayacSaniyeCountDownXtbadminV2AjaxJavaScriptNumaraFormatPhoneNumberFormatTelefonNumarasıDebuggerDetectUnpackerDisassemblerSecurityReverseEngineeringAlgorithmMacDKHOSCTFCapture The FlagForensicTriviaIntelligenceCRC32CRYPTPASSWORD_HASHWin10StoreMağazaMicrosoftReInstallWSLPowerShellPOSTCyberSiberAdli BilişimHackerUSBCDLiveToolsBruterNmapMSSQL ServerMS SQL ExpressMS AccessOracleIBM DB2SybaseInterbaseInformixExceldBase DbfVisual FoxProMySQLConnectionŞifreleri BulCMDLaZagneEthernetTuxCutNetCutNetKillPerformansCronTabCronJobRestartStopStartBashShellWireSharkFlagUSOMBTKBase64QRÇözümlerWriteUpWrite-UpFinalReconOSINTToolScannerWebsiteSiber GüvenlikPhishingVPNWannacryMobileDeviceFunctionMobil AlgılaMobil TespitisMobilephp mobilJavascriptYazı EfektKayan YazıText EffectsearchBoxinputclassplaceholdersetIntervalsetTimeoutJSpreventBackwindowpushStatehistoryonloadblock browser back buttonVPN Nediranonimtor