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.* Siteyi ziyaret edin.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ü?* Siteyi ziyaret edin.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.* Siteyi ziyaret edin.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.* Siteyi ziyaret edin.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.* Siteyi ziyaret edinDavid 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.* Siteyi ziyaret edinCarrotCreative – 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.* Siteyi ziyaret edinBrightCreative 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.* Siteyi ziyaret edinİ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ı.* Siteyi ziyaret edinAviary’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.* Siteyi ziyaret edinDesignFlavr’ı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.* Siteyi ziyaret edinHV-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.* Siteyi ziyaret edinAsylum’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.* Siteyi ziyaret edinjQuery 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ış.* Siteyi ziyaret edinClark 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.* Siteyi ziyaret edinRob 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ış.Siteyi Ziyaret EdinWeb 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.* Siteyi ziyaret edinJunaid 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.* Siteyi ziyaret edinKomodoMedia

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!* Siteyi ziyaret edinjQuery’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: NetTutsjQuery ile ilgili yazdığım diğer yazılar
* 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