Sitemiz de bir alana sanki klavyeden biri yazıyormuş gibi yazdırmamızı sağlayan jquer'nin
t plugini işleyeceğiz.Bu plugin için de
htm l de kullanabiliyoruz.Bu şekil de sitelerimiz de anlatım,duyuru vs gibi işlemler de kullanabiliriz.
İndir : http://ustaderslik.com/dosya/Otomatik-Yazı.zip
İncele : http://ustaderslik.com/ornek/Otomatik-Yazı/
$('seçici').t('metin',{});
Kullanımı bu şekil de.Bazı parametreleri mevcut.Onları bir inceleyelim.
speed : Yazma hızı.Milisaniye cinsinden.,
speed_vary : Yazarken hızlanma biçimi.
true : yavaştan hızlıya.
false : hızlıdan yavaşa.
tag : Seçtiğimiz alanın içine yazılacak olan metnin hangi tag için de olacağını belirliyoruz.Standar
spandır.
blink : Yazının sonundaki çubuğun yanıp sönme hızı.
caret : Yazının sonundaki çubuğun şeklini değiştirmek için.
Parametreler bu kadar,örnekte daha iyi incelersiniz.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="t.min.js"></script>
<script>
$(function(){
$('.alan').t('UstaDerslik - <span class="renk">cArleone</span> ',{
speed:100,
speed_vary:false,
tag:'h1',
blink:500,
caret:" |",
});
$('.alan2').t('<span class="renk2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed ligula gravida, tempor eros aliquam, sollicitudin purus. In hac habitasse platea dictumst. Sed vel molestie turpis. Integer sapien tortor, ornare eu purus sed, blandit malesuada dolor. Nam volutpat purus elit, tristique bibendum erat congue ac. Curabitur quis ullamcorper libero, eget pellentesque enim. Pellentesque lectus enim, finibus et tortor quis, fringilla ultricies leo. Fusce euismod, dolor quis sagittis venenatis, odio ante bibendum quam, blandit eleifend erat magna rutrum massa. Praesent quis tincidunt lacus. Nulla semper ligula sed sapien venenatis mollis. Mauris sit amet libero varius, condimentum purus nec, porttitor risus. Cras consequat posuere tempus.</span>',{
speed:10,
blink:300,
caret:" |",
});
})
</script>
<style type="text/css">
.alan,.alan2{width:900px;margin:auto;padding:15px;text-align:center;}
.renk{color:#666;}
.renk2{color:#15d4f5;font-size:20px;}
</style>
</head>
<body>
<div class="alan"></div>
<div class="alan2"></div>
</body>
</html>