jQuery Desteğiyle Harika Metin Sunumu

Machine Gun Text EfektiÇok değil, birkaç yıl önce sağdaki animasyonun dosya tipinin ne olduğunu sorsalardı SWF veya herhangi bir video formatı olduğunu iddia ederdim.

Günümüzdeki kod sistemleriyle bu tarz sunumları hazırlamak için çok fazla çaba sarfetmenize gerek yok. Birkaç satır JavaScript kodu ve tasarım unsurlarına az da olsa hakim olmanız neredeyse yeterli. Nasıl mı? Hadi derse başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Kullanacağımız CSS, HTML ve JavaScript kodlarını aşağıdaki düzende sayfanıza yerleştirmeniz gerekmektedir.

Not : Bu tasarım için jquery-latest.js ve TweenMax.min.js dosyalarına ihtiyaç duyarsınız. Ben bu iki JS dosyasını cloudflare ve jQuery’nin resmi web sayfasından çekmekteyim.

1. Adım : Yapacağınız ilk iş sayfanızın <head></head> tagları arasına aşağıdaki kodları eklemek olmalı :


<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' type='text/javascript'></script>

2. Adım : HTML Kodlarımızın kalanları ile devam edelim. Aşağıdaki kodları <body></body> tagları arasına koymalısınız. JavaScript kodlarını da karışıklık yaratmasın diye birlikte sunuyorum.

<div id="aw-tanim"></div>

<span style="font-family: Consolas, Monaco, monospace; font-style: normal;"><script></span>
var container = $("#aw-tanim"),
 _sentenceEndExp = /(\.|\?|!)$/g;

function metin(text) {
 var words = text.split(" "),
 tl = new TimelineMax({delay:0.6, repeat:2, repeatDelay:4}),
 wordCount = words.length,
 time = 0,
 word, element, duration, isSentenceEnd, i;

 for(i = 0; i < wordCount; i++){
 word = words[i];
 isSentenceEnd = _sentenceEndExp.test(word);
 element = $("<span>" + word + "</span>").appendTo(container);
 duration = Math.max(0.5, word.length * 0.08);
 if (isSentenceEnd) {
 duration += 0.6;
 }
 TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01});
 tl.to(element, duration, {scale:1.2, ease:SlowMo.ease.config(0.25, 0.9)}, time)
 .to(element, duration, {autoAlpha:1, ease:SlowMo.ease.config(0.25, 0.9, true)}, time);
 time += duration - 0.05;
 if (isSentenceEnd) {
 time += 0.6; }
 }
}
metin("AdobeWordPress, Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezidir. Adobe programlarının bir dalının web tasarımına doğru uzanması WordPress ile olan bağlantımızı sağlamaktadır. WordPress kategorisi ise bizim için alt kategoriyle birlikte dallanan özgün bir detaydır. Yine beraberinde web tasarımından yola çıkarak CSS ve Arama Motoru Optimizasyonu (SEO) konularını da işlemekteyiz. Ve bütün bu başlıkları en basit bir dil ile anlatıyoruz.");
</script>

3. Adım : Sırada CSS Kodlarımız var.


body{
background-color:#6caf73;
color:white;
}

#aw-tanim{
position:relative;
width:800px;
height:180px;
margin:auto;
overflow:hidden;
}

#aw-tanim span{
position:absolute;
font-family: 'Asap', sans-serif;
font-weight:700;
margin:0;
padding:0;
width:800px;
text-align:center;
visibility:hidden;
font-size:90px;
top:35px;
}

Sonuç

İşlem bu kadar. Yukarıda da belirttiğim gibi bu tasarım jquery-latest.js ve TweenMax.min.js dosyalarına ihtiyaç duymakta. İsterseniz bu dosyaları kendi sunucunuza upload edip kullanabilirsiniz.

Bu da ilginizi çekebilir  CSS ile Çoklu Border (Çerçeve) Oluşturma

Bir sonraki makalemde görüşmek üzere.