astropaykartsatis.net
User Tag List

Yeni Konu Aç Cevap Yaz
29.05.2013, 00:44 1 (permalink)
AdobeWordpress
  • Neredenİstanbul Şubesi
  • Üyelik Tarihi28.05.2013
  • Yaş29
  • Ticaret Sayısı0
  • Mesajlar102
jQuery ile Machine Gun Text Efekti #permalink (permalink)


Ç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-des...-metin-sunumu/
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
Yeni Konu Aç Cevap Yaz
Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Yetkileriniz
Konu Acma Yetkiniz Yok Cevap Yazma Yetkiniz Yok Eklenti Yükleme Yetkiniz Yok Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık Smileler Açık [IMG] Kodları Açık HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Forum Kuralları
Benzer Konular
Konu Konuyu Başlatan Forum Cevap Son Mesaj
Hadiselerin İlmi (Olayların Bilimi) muhsin iyi Diğer 0 10.05.2013 16:53
Türk sanal pos veren yerlere altarnatif olarak. sessizliktr Webmaster Genel Konular 36 31.07.2010 16:31
swf xml ilişkisi peep Webmaster Genel Konular 3 25.12.2009 21:10
ICQ ile Mynet İşbirliği Yapıyor hakanizm ICQ IRC 2 11.07.2006 17:56
Paypal ile direk text reklam verebilirsiniz ..::aTi::.. Reklam Alım - Satım 0 29.01.2006 04:24

Forum Saati: 17:39. Zaman dilimi GMT +3 olarak ayarlanmıştır.
Powered by vBulletin™ Version 3.8.7
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.