Mükemmel jQuery eklentilerine ve onları nerede bulabileceğine dair sayısız makale bulunuyor. Ancak bazen bu üçüncü parti kaynaklara ve eklentilere bel bağlamamak en iyisidir. Tıpkı eskiden olduğu gibi kendiniz yapın. Bugün, günümüz modern web siteleri ve uygulamalarında kullanılan 20'nin üzerinde yaratıcı ve pratik jQuery kullanım örneklerini listelemeye çalışacağız. Eminim bu örnekler size bir sonraki projeniz için ilham verecektir.
James Padolsey Renk DeÄŸiÅŸtiricisi
Nettuts yazarlarından James Padolsey'in web sitesinde güzel bir özellik bulunuyor. Sitenin sağ üst kısmında bulunan "özelleştir" çubuğu başlık kısmının arkaplan rengini değiştirmenizin sağlıyor.
Dragon Interactive'in jQuery Navigasyonu
Bu elemanlar aşağı yukarı web tasarımının tanrılarıdır ve siteleri de bunu doğrular nitelikte. Bunun için sadece ana sayfalarının başlık kısmındaki jQuery navigasyonuna bakmak yeterli. Daha önce hiç bu kadar seksi bir navigasyon gördünüz mü?
FamSpams Facebox
FamFamFam, sitenin FamSpam özelliği için özel bir lightbox betiğine ihtiyaç duydu. Site bunun üzerine FaceBox adı verilen bir yöntem oluşturmaya karar verdi. FaceBox, lightbox'un efektlerini kopyalıyor ancak statik html sayfalarını, iletişim formlarını; kısacası istediğiniz her şeyi gösterebilmenizi sağlıyor. Facebox günümüzde yoğun talebin ardından bir jQuery eklentisi olarak dağıtılıyor.
Grooveshark Widget Creator
Sıradan bir flash menüsü / kontrol menüsü kullanmak yerine, Grooveshark biraz karıştırarak özel bir jQuery betiği oluşturmakta bulmuş çözümü. Sitenin sunduğu betik, kendi müzik widgetlerinizi oluşturabilmenizi sağlıyor ve pek güzel görünüyor.
CSS-Tricks Fade-In Navigasyonu
Chris Coyier tarafından hazırlanan CSS-Tricks, inanılmaz derecede basit ancak kullanışlı bir jQuery menüsüne sahip. Bağlantıların üzerine fare imleci götürüldüğünde doğrudan renkleri değiştirmektense, jQuery kullanılarak renk geçişi sağlanmış durumda.
David Walsh Link Nudge
DavidWalsh.name'den geliştirici David Walsh, bağlantılarınızın üzerine fare imlecini götürdüğünüzde küçük bir iteleme efekti ile sonuçlanan küçük ve kullanılması çok kolay olan bir betiği bünyesinde barındırıyor. Bu betik jQuery'nin hover yeteneklerinden sonuna kadar faydalanıyor. Yan çubuktaki ve altlıktaki bağlantılar üzerinde efekti görebilirsiniz.
CarrotCreative - Sitelere Yönelik Özel Lightboxlar
CarrotCreative websitesini ziyaret ederseniz, iki özel jQuery efekti ile karşılaşacaksınızdır. İlk olarak eğer sol üst kısımdaki sitelere tıklarsanız, sitelerin ve simgelerinin listelendiği 'lightbox' benzeri bir efektin kendine özgü uygulamasını göreceksinizdir. İkincisi ise eğer herhangi bir navigasyon bağlantısına tıklarsanız, sayfanın yeniden yüklenmediğini, bunun yerine yeni sayfaların sağ taraftan geldiğini göreceksinizdir.
BrightCreative Portfolyosu
Bir diğer "ikisi bir arada" kullanım örneği daha... Bright Creative, site navigasyonu üzerinde gerçekten rahatlatıcı ve sımsıcak bir jQuery efektine sahip. Bunun yanısıra sitenin tüm diğer portfolyo sayfalarının sekme efekti de bulunuyor, bu sebeple kullanıcının her bir yeni sayfa için sayfanın tamamını yüklemesi gerekmiyor - jQuery ve AJAX'ın da yardımıyla.
İnanılmaz Giriş Formu
Çok uzun zaman önce, Connor Zwick nasıl büyüleyici bir açılır menü yapılabileceğine dair güzel bir rehber yazmıştı.
Aviary'nin Uygulama Kaydırıcısı
Bu kullanımı bir tür "marquee" olarak adlandırmak hata olur. Bunun yerine Aviary, çok güzel görünen ve işleyen bir 'kaydırıcı' kullanarak, çok miktarda metni küçük bir alanda görüntüleyebilmeyi başarabilmişler. Daha da iyisi JavaScript'in etkin olmadığı ortamlarda bile kaydırıcının bir nebzeye kadar işleyebiliyor oluşu.
DesignFlavr'ın Geçiş Efekti
İlham alınacak tasarımlara yönelik kaynakları ile tanınan DesignFlavr, sade bir fadeIn/fadeOut efektini sitenin seçkin çalışmalarını ve onlara bağlı açıklamalarını görüntülemek için kullanmışlar. Ayrıca site yetkilileri sitenin ana navigasyonu üzerinde lavalamp eklentisini de çok güzel bir şekilde kullanmışlar.
HV-Design'ın RSS Simgesi İçin Kullandığı Belirme Efekti
HV-Design'ın ana sayfasında RSS simgesinin ilk olarak bir taslak olarak belirdiğini, ardından da fare ile üzerine gelindiğinde tamamlanmış bir RSS simgesine büründüğünü göreceksiniz.
Asylum'un Özel Kaydırıcısı
Mükemmel bir web sitesi olmasının yanısıra, Asylum'ın "seçkin makaleler" bölümü için kullandığı kaydırıcı da kendisini benzerlerinden bir adım öne çıkarıyor. Bu kaydırıcının diğerlerinden neden daha güzel olduğunu anlamak zor, bunun sebebi muhtemelen ilgili kaydırıcının diğerlerinden kısmen daha farklı davranıyor olması. Siteye girin ve kendiniz test edin.
jQuery Kullanılarak Kolaylaştırılan 5 JavaScript Tekniği
Brian Reindel, hazırladığı web sitesi üzerinde istediğiniz şekilde kullanabileceğiniz 5 özel betiği sergiliyor. Makale, daha önce kullanılan javascript tekniklerini alıyor ve onları daha güçlü, daha sade okunması daha kolay kılmak için jQuery ile harmanlıyor.
Coda'nın Tüm Web Sitesi
Coda, büyüleyici kullanıcı arabirimi ve site tasarımı ile kendisini benzerlerinden bir adım öne çıkarıyor. Sitelerinde kullandıkları sekmeli içeriğin kullanım şekli, sitenin yayımlanmasının hemen ardından jQuery geliştiricileri arasında yaygaraya neden oldu ve herkes, sitelerine bu yöntemi entegre etmeye çalıştı. Ayrıca site üzerinde de başlık kısmında bulunan bağlantılar için çok güzel bir hover efekti kullanılmış.
Clark Lab Geçiş Efekti
ClarkLab, ThemeForest sitesinde yazarlık yapan tanınmış ve başarılı bir yazardır. Eğer aşağıdaki bağlantıya tıklayarak onun portföyünü ziyaret ederseniz, büyük boyutlu başlık imajının bir süre sonra kendisinin son çalışmalarını gösteren içeriğe doğru yavaşça geçiş yaptığını göreceksinizdir. Geçiş efekti o kadar başarılı bir şekilde uygulanmış ki üstteki imajın değiştiğini zar zor fark edebiliyorsunuz.
Rob Young Kullanıcı Arabirimi
Tasarımcı ve Sanat Yönetmeni Rob Young, bugüne kadarki çalışmalarını bir Mac ekranı üzerinde görüntüleyen bir kullanıcı arabirimini sitesinde kullanmış. Ardından jQuery kaydırma efektlerini kullanarak, her bir yeni sayfanın sanki bilgisayar ekranı üzerinde görüntüleniyormuşçasına kayarak ekran üzerinde belirmesini sağlamış.
Web Designer Wall
Görsel olarak büyüleyici bir site olmasının yanısıra WDW bazı elementlerin üzerine fare imleci götürüldüğünde beliren özel olarak gelitirilmiş bir jQuery betiğini kullanıyor. Efektleri görebilmek için siteyi ziyaret ettikten sonra fare imlecinizi RSS ve navigasyon öğeleri üzerine götürün.
Junaid W. Hanif
Bir diğer güzel sekme efekti daha... Okların yerine sayfalama ve AJAX kullanılarak sade ve kullanışlı bir kullanıcı arabirimi oluşturulmuş. Ayrıca navigasyon öğeleri de sade ve güzel bir efekte sahip.
KomodoMedia
En sevdiğimi en sona sakladım. İlk olarak tasarıma şöyle bir bakın. Ne kadar güzel, özgün ve rahatlatıcı değil mi? Site üzerinde bugüne kadar gördüğüm en yaratıcı jQuery efektlerinden birisi kullanılmış. 'foilage-o-meter' adı verilen bir kaydırma çubuğu kullanıldığında site tasarımının genelinin yavaşça değiştiğine şahit olacaksınız. Site genelindeki sürprizler için de sitenin kaynak koduna bakmayı unutmayın!
jQuery'nin sizin yaratıcılığınız ve yetenekleriniz doğrultusunda yapabilecekleri sınırlandırılan bir araç olduğu daima aklınızda bulunsun. Tasarımınız ve geliştirme süreciniz daima kendinize özgü olsun, bunun sonucunda çok güzel sonuçlarla karşılaşacağınızdan emin olabilirsiniz. Lütfen yorumlarınızla sizin de tasarımını ve işlevselliğini beğendiğiniz siteleri bizlerle paylaşmayı unutmayın.
- Kaynak: NetTuts
- Mükemmel jQuery Navigasyonuna Sahip 8 Site
- jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek
- Size Sıfırdan jQuery Öğretecek 15 Kaynak
- jQuery İle Kolayca İpucu (Tooltip) Oluşturma Yöntemleri
