Basit bir Daktilo Efekti

Geçenlerde lazım olduğu için araştırma yapıp bulduğum bir jQuery kodu bu. Çok basit şekilde daktilo efekti eklemenizi sağlıyor istediğiniz herhangi bir yere. Aşağıdaki kodun içinde açıkalmalarını yazdım. Bir adette basit demo ekledim ona da link verdim. Koda bakacak olursak.

Aşağıdaki kod kendini tekrarlayabilen, yani listedeki içeriklerin sonuncusuna geldiğinde tekrar başa dönebilen bir kod. li etiketini kullanarak içeriklerimizi belirliyoruz. Öncelikle sayfamızda jquery çağırmamız gerekmete. Yoksa kodumuz çalışmayacaktır. Aşağıdaki satırdan bunu edinebilirsiniz. Ya da en alttaki kodun son halini direkt alabilirsiniz.

jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>

Javascript

$(function() {
	var repeat = 1;	//Tekrarlama Ayaro 0 veya 1 olabilir.
    var ch = 0;   	//Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
	var item = 0; 	//Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
	var items = $('#caption li').length;
	var time = 1000;  // Görünecek Süre (milisaniye)
	var delay = 50;   // Gecikme (milisaniye)
	var wait = 4000   // Bekleme Süresi (Başlama için (milisaniye))
	$('#showCaption').css('width', ($('#caption').width() + 20));
	function tickInterval() {
		if(item < items) {
			var text = $('#caption li:eq('+item+')').text();
			type(text);
			text = null;
			var tick = setTimeout(tickInterval, time);
		} else {
			if(repeat == 1) {
                            ch = 0;
                            item = 0;
                            tickInterval();
                        } else {
                            clearTimeout(tick);
                        }
		}
	}
	function type(text) {
		time = delay;
		$('#showCaption').html(text.substr(0, ch++));
		if(ch > text.length) {
			item++;
			ch = 0;
			time = wait;
		}
	}
	var tick = setTimeout(tickInterval, time);
});

Bu kodun aktifleşebilmesi için showCaption idsine sahip bir div ve liste içeriklerini belirleyeceğimiz caption idsine sahip bir <ul> liste başlangıcına ihtiyacımız var. Onlar da aşağıdaki gibi olmalıdır.

HTML İçerik

<ul id="caption">
	<li>Birinci İçerik.</li>
	<li>İkinci İçerik.</li>
	<li>Üçüncü İçerik.</li>
	<li>Dördüncü İçerik.</li>
	<li>Beşinci İçerik.</li>
	<li>Altıncı İçerik.</li>
	<li>Yedinci İçerik.</li>
	<li>Sekizinci İçerik.</li>
	<li>Dokuzuncu İçerik.</li>
	<li>Onuncu İçerik.</li>
</ul>
	<div id="showCaption"></div>

Bunları ekledikten sonra tabii ki CSS öğelerine de ihtiyacımız olacak. Öncelikle caption tagını saklamalıyız. Çünkü jQuery kodu showCaption divi içierisinde bu listedeki öğeleri tek tek gösterecek. Direkt listeyi göstermek istemeyiz.

CSS

#caption {
	display: none;
}
#showCaption{
	font-family:Courier New;
	font-size:20px;
	color:#000;
	font-weight:bold;
	width:350px;
	min-width:350px;
}

/* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */

Dosyamızı HTML Formanıta alırsak şöyle görünecektir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr_TR">
	<head profile="http://gmpg.org/xfn/11">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>jQuery Daktilo Efekti ~ KaiseRCrazY.CoM</title>
			<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>
			<script type='text/javascript'>
			$(function() {
				var repeat = 1;	//Tekrarlama Ayaro 0 veya 1 olabilir.
				var ch = 0;   	//Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
				var item = 0; 	//Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
				var items = $('#caption li').length;
				var time = 1000;
				var delay = 50;
				var wait = 4000
				$('#showCaption').css('width', ($('#caption').width() + 20));
				function tickInterval() {
					if(item < items) {
						var text = $('#caption li:eq('+item+')').text();
						type(text);
						text = null;
						var tick = setTimeout(tickInterval, time);
					} else {
						if(repeat == 1) {
										ch = 0;
										item = 0;
										tickInterval();
									} else {
										clearTimeout(tick);
									}
					}
				}
				function type(text) {
					time = delay;
					$('#showCaption').html(text.substr(0, ch++));
					if(ch > text.length) {
						item++;
						ch = 0;
						time = wait;
					}
				}
				var tick = setTimeout(tickInterval, time);
			});
			</script>
			<style type="text/css">
				#caption {
					display: none;
				}
				#showCaption{
					font-family:Courier New;
					font-size:20px;
					color:#000;
					font-weight:bold;
					width:350px;
					min-width:350px;
				}

				/* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */
			</style>
	</head>
	<body>
		<ul id="caption">
			<li>Birinci İçerik.</li>
			<li>İkinci İçerik.</li>
			<li>Üçüncü İçerik.</li>
			<li>Dördüncü İçerik.</li>
			<li>Beşinci İçerik.</li>
			<li>Altıncı İçerik.</li>
			<li>Yedinci İçerik.</li>
			<li>Sekizinci İçerik.</li>
			<li>Dokuzuncu İçerik.</li>
			<li>Onuncu İçerik.</li>
		</ul>
			<div id="showCaption"></div>
	</body>
</html>

Biliyorum çok aşırı tatmin edici bir anlatım olmadı. Bugün biraz yorugun gibiyim. Örnek linkindeki sayfadan tam içeriği alabilirsiniz.
Örnek: Örneği Görebilmek İçin Tıklayın

Selametle

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir