jQuery ile Machine Gun Text Efekti

AdobeWordpress

0
İyinet Üyesi
Katılım
28 Mayıs 2013
Mesajlar
190
Reaction score
1
js-sunumu.gif


Ç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.



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ı :

Kod:
<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='http://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.

Kod:
<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.

Kod:
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.

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

Kaynak : http://www.adobewordpress.com/js-destegiyle-harika-metin-sunumu/
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara Cicisex Porno
Üst