Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / j Q u ery / j Q u ery D esteğ i yl e Ha ri ka M eti n Su n u m u
jQuery Desteğiyle Harika Metin Sunumu Vatanay Özbeyli tarafından 29 Mayıs 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir
Ç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ı : 1 <link href='http://fonts.googleapis.com/css? family=Asap:400,700' rel='stylesheet' type='text/css'> 2 <script src="http://code.jquery.com/jquery-
latest.js"></script> 3 <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. 1 <div id="aw-tanim"></div> 2 3 <span style="font-family: Consolas, Monaco, monospace; font-style: normal;"><script></span> 4 var container = $("#aw-tanim"), 5 _sentenceEndExp = /(\.|\?|!)$/g; 6 7 function metin(text) { 8 var words = text.split(" "), 9 tl = new TimelineMax({delay:0.6, repeat:2, repeatDelay:4}), 10 wordCount = words.length, 11 time = 0, 12 word, element, duration, isSentenceEnd, i; 13 14 for(i = 0; i < wordCount; i++){ 15 word = words[i]; 16 isSentenceEnd = _sentenceEndExp.test(word); 17 element = $("<span>" + word + " </span>").appendTo(container); 18 duration = Math.max(0.5, word.length * 0.08); 19 if (isSentenceEnd) { 20 duration += 0.6; 21 } 22 TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01}); 23 tl.to(element, duration, {scale:1.2, ease:SlowMo.ease.config(0.25, 0.9)}, time) 24 .to(element, duration, {autoAlpha:1, ease:SlowMo.ease.config(0.25, 0.9, true)}, time); 25 time += duration - 0.05; 26 if (isSentenceEnd) { 27 time += 0.6; } 28 } 29 } 30 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."); 31 </script> 3. Adım : Sırada CSS Kodlarımız var. 1 2 3 4 5 6 7 8 9 10
body{ background-color:#6caf73; color:white; } #aw-tanim{ position:relative; width:800px; height:180px; margin:auto;
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
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.
Benzer Konular: CSS ve jQuery Yardımıyla Resimlere Caption Animasyon ile Metin Renklendirme jQuery ile Minimum ve Maksimum Karakter Limitli Form… CSS ile Etkileyici İnteraktif Logo jQuery ile Açılır Pencere
Yazı Kategorisi : jQuery , Tasarım Unsurları Anahtar Kelimeler : .js , adobe , css , html , java , jquery , show , slayt , slide , swf , video