JQuery ve Çizim birleştiren 24 Akıllı Web Sitesi Tasarımları
JavaScript'in sayesinde "dinamik" ve "illüstrasyon" kelimeleri artık sadece Flash tabanlı web sitelerine uygulanmamaktadır.
Artık bu dinamik HTML, yaygın olarak kullanılan tarayıcılarda bir gerçekliktir ve kullanımı kolay hale getirmek için bir çok süslü JavaScript kitaplığının bulunması sayesinde, CSS web siteleri Flash tarafından çok sıkı tutulan bazı sokak kredilerini geri alabilir.
Bu yeni JavaScript kitaplıklarından jQuery , kullanım kolaylığı, özelliklerin genişliği ve ilk bakışta görsel benzersizliğinden dolayı en yaygın olarak kabul edilenlerden biri haline geldi.
İşte jQuery ve Çizim kullanarak 24 akıllı web sitesi tasarım örnekleri .
1.Free Elli Beş
Özellikler: Başlık resmini değiştirme; çoklu küçük slayt gösterisi pencereleri.
Açıklama: Bu web sitesi sadece tasarımla ilgili çok iyi bir içeriğe sahip olmakla kalmaz, jQuery web sitesinin görünümünü ve kullanılabilirliğini geliştirmek için çeşitli yollarla kullanılır. Düzenli olarak değişen resimli arka plan ve bazı güzel dairesel arayüz kontrolleri ekleyin ve jQuery ve illüstrasyonun güzel bir evliliğine sahip olursunuz.
Üstbilgi resimli ana sayfa: 
Açık etiketli sol sütun: 
Giriş yapmak için pencere gölgesi başlığı: 
2. Frozn
Özellikler: Dikey ve yatay kayma.
Açıklama: Sayıları büyük, parlak renkli daireler dışında, en çok dikkat ettiğim özellik resimli profil resimleriydi. Ben de onları tıklıyorum. Bu sihir gerçekleştiği zaman: gömülü Vimeo videoları ile tam bir blog girişi seti açan dikey ve yatay pencere gölgeleme. Aşağıya indiğinizde, kalıcı altbilgi eğimi ilginç bir etkendir.
Ana sayfadaki büyük daireler ve yazar resimleri: 
Dikey olarak genişleyen içerik: 
Yazar girişleri blog girişlerini ve videolarını göstermek için genişler: 
3. iPhone Maketi
Özellikler: Sürükle ve bırak, hedefleme
Açıklama: Eğer iPhone için bir uygulama oluşturmayı düşündünüz (ve hangi Web geliştiricisinin sahip olmadığı?), Bu kontrol etmek için bir web sitesi olabilir. Kabataslak veya bilgisayarla çizilmiş arayüz elemanlarını çizik veya bilgisayarla çizilmiş bir iPhone anahatına sürükleyip bırakmanıza izin verir. Tasarımda oldukça çıplak kemikler olmasına rağmen, sadece Flash ile daha önce çekilebilecek şekilde yenilikçi bir kullanım şeklidir.
Bilgisayarlı iPhone editörü: 
Kabataslak iPhone editörü: 
4. Florida Güzelleşmek
Özellikler: Şeffaflık ile slaytlar, slayt gösterisi
Açıklama: Bu sıçrama sayfasındaki resimli ağacın parlak renkleri ve detayları anında dikkat çekicidir. Ağaçtan dallanan kategorilerden herhangi birine tıklayın ve sadece açıklayıcı jQuery kaynaklı içeriği değil, tamamen farklı bir ağaç da elde edersiniz. Aşağı kaydırın ve güzel bir ortalanmış slayt gösterisi ve yeraltındaki doğal motifleri alan altbilgiyi göreceksiniz.
Büyük ağaç, slayt gösterisi ve altbilgi ile ana sayfanın tam görünümü: 
“Kullanılabilirlik” ağacı: 
“Esneklik” ağacı: 
5. Çay Yuvarlak Uygulaması
Özellikler: Slayt gösterisi, küçük animasyon, kayan nesneler
Açıklama: Belki de Apple'ın parlak tasarımcılara sahip olduğunun bir işareti veya imzası var, ancak iPhone fotoğraflarını kırpmış web sitelerini beğendim. Bu web sitesi, iyi hazırlanmış düğmeler üzerinde gezinerek tetiklenen bir ekran slayt gösterisi ile animasyonlu bir içeriğe sahip. Yuvarlatılmış Helvetica tipi telefonun ve düğmelerin tasarımıyla iyi uyum sağlar. Sayfadaki çay temalı resimler ve uygulamanın ekran görüntüleri her şeyi birbirine bağlar.
Sayfadaki iPhone grafiğindeki animasyonlar: 
Pop-up pencere, uygulamanın ekranını görüntüler: 
İPhone grafikte gösterilen başka bir çay yuvarlak uygulama ekranı: 
6. En İyi Öncesi
Özellikler: Ekran konumlandırma, gezinme animasyonu
Açıklama: Eğer web siteleri jQuery steroidleri alabilirse, bu web'in Barry Bond'ları olacaktır. Tüm görsel görsellerle, bu web sitesi bir Flash web sitesi için kolaylıkla hata yapabilir. Dikkatli bir incelemeden sonra, sayfanın programlama açısından Flash ne karmaşık olduğunu göreceksiniz. Ancak, bir Flash izinin bulunmadığının fark edilmesi, ruhsal olarak kazınacaktır.
Ana menü: 
Kıvırcık parantez içinde daha fazla şey: 
Alt menü ve portföy: 
Animasyon
Animasyonu oluşturmak için DHTML'in seçildiği bir web sitesi tasarımı bulmak her zaman bir sürprizdir. Benim için en iyi yanı, iPhone'umu görebilmem. Eminim, tasarımcıların Flash'ı ve animasyon dostu araçlarını görmezden gelmelerinin ana nedeni bu değil. Animasyonlarını kodlamak için jQuery'ye ne kadar güvendiklerini bilmiyorum, ama bir çeşit sadist eğilimlere sahip olmaları gerekiyordu.
7. Tori'nin Gözü
Özellikler: Origami kuşlar yatay olarak uçuyor.
Açıklama: Kim bir web sayfasında origami kullanmayı düşünüyor? Ve kim standart mavi illüstrasyon yerine tweets temsil etmek için mavi origami kuşları kullanmayı düşünüyor? Ve kim tweet'leri canlandırmayı düşünüyor? Bu soruların cevabı Tori'nin Gözü'nün yaratıcıları. Bu özelliklerden herhangi biriyle bir web sitesi oluşturun ve tamamen orijinal bir şeyiniz olsun. Bu içerik oluşturucular için, tüm bu özelliklere sahip olmak yeterli değildi. Flash olmadan tüm animasyonu yapmak için karşı sezgisel karar verdiler!
Bir manzara üzerinde uçan Origami Twitter kuşları: 
8. Çantalar
Özellikler: Tek renkli simgeleri ile slayt gösterisi ve altbilgi animasyon.
Açıklama: Burada jQuery kullanımı, navigasyon alanında bir tıklama ile slayt gösterisi tetiklendiğinde en barizdir. Geniş beyaz alan, siyah yazı tipi ve eşleşen simge resimleri hoş görünümlü bir web sitesidir. Ama bak, altbilgideki bir animasyon, geldiğinizden beri çalışmayı durdurmadı. Sağlam siyah animasyonları sağ tıklayın ve web sitesinin uzun süredir devam eden filminin sırrını keşfedeceksiniz: Sprite ve DHTML.
Çok fazla beyaz alan içeren ana sayfa: 
Slayt gösterisi içeriği boyunca büyük simgeler dağıldı: 
Footer animasyonu, web sitesinde nerede olursanız olun, sürekli olarak çalışır: 
9. Kidd 81
Özellikler: Üstbilgi animasyonu yatay olarak seyahat eder.
Açıklama: Parlak renkli kış temalı çizimler burada dikkatinizi hemen çekiyor ve tasarımın devamlılığı altbilgiye kadar uzanıyor. Nesneleri canlandırmak için jQuery kullanan diğer web sitelerinin bazıları gibi, yumuşak hareket eden görüntüler ilk bakışta Flash'tan ayırt edilemez. Pastanın üzerine krema, sürüklenebilir “Vay! Bu simgeleri sürükleyebileceğine inanamıyorum ”.
Ana sayfa başlığı animasyonları: 
Aynı resimli temalı altbilgi: 
Mağaza bölümü aynı karakter ve renklere sahiptir: 
Dikey kaydırma
Birkaç JavaScript aracı, bir sayfanın bölümleri arasında düzgün kaydırma tetikleme yeteneğine sahiptir. jQuery, elbette, bu etkiyi gerçekleştirme yeteneğinden daha fazladır ve bu bölümdeki web sitelerinin en azından birkaç tanesi bu rotayı alır. Dinamik kaydırma güzel bir efekttir, ancak yaratıcı ve ayrıntılı resimlerle birleştirildiğinde, özellik daha büyük resmin bir parçasıdır.
10. Tomas Pojeta
Özellikler: Gökyüzü, okyanus, sualtı.
Açıklama: Bu bölümdeki diğer birkaç web sitesi gibi, Pojeta da yüksek irtifadan yüzeyin altına kadar uzanan bir motif benimser. Web sitesinin üstü, son derece detaylı roket ve maymunuyla uzayda. Aşağı kaydırın ve alt atmosferdeki uzaylıları ve balonları görürsünüz. Daha da aşağı doğru su ortasında bir Paskalya Adası görünümlü arazi parçası, bir denizaltı ile bir sualtı görüşüne yol açar. Her örnek uyuyor ve geçişler aldığı kadar kusursuz.
Roket ve uzaydaki maymun: 
Paskalya Adası ve toucan: 
Denizaltı sualtı: 
11. Morphix
Özellikler: Uzay, gök, toprak, yeraltı.
Açıklama: Morphix ayrıca bazı üst atmosferik hareketlerle başlar, ancak deniz yerine karaya geçiş yapar ve bir yeraltı girişiyle tamamlanır. Stil açıkça farklıdır, ancak her katman için resim, sonuncusuna benzer bir şekilde ufuk duygusu yaratarak sayfanın genişliğini kapsar. Ve yine, gökyüzünden yeraltına geçiş özellikle dinamik kaydırma ile sorunsuz bir şekilde akıyor.
Üst atmosfer, portföyü ile: 
İnekler ve gökdelenler ile zemin seviyesi: 
Yeraltı, ağaç kökleri ve groundhog: 
12. GANDRWeb
Özellikler: Çeşitli Infographics.
Açıklama: Önceki iki web sitesinin aksine, bu, karakterlerin, manzaraların ve arka planların yerine Infographics kullanıyor. Sayfanın her bölümü, eşlik eden grafiği açıklar. Sayfanın alt kısmı, şaşırtıcı bir şekilde, büyük bir web formu. Çok iyi illüstrasyonlar kullanan tamamen satışa yönelik bir web sitesi nadirdir. JQuery tetiklenen geçişler iletiye parlaklık katar.
Infographic faydaları ve fiyatlandırmayı açıklayan: 
Infographic tasarım sürecini açıklayan: 
İnternet formu: 
13. Orman Clark
Özellikler: Bulutlar, zemin ve uçan nesneler
Açıklama: Bu bölümdeki ilk iki web sitesi gibi, Orman Clark'ın web sitesi de gökyüzü ile başlıyor, ancak uzun sayfa, yere çarptığımız yerde altyazısına kadar bulut gökyüzü ile yapışıyor. Bu sayfa ile bu makaledeki diğerlerinin çoğu arasında gözle görülür bir fark, ana gezinme ve çizimin sabit konumudır. Bu, yüzen yumurtayı vurgulayan arka planın üstündeki yıldız yağmuru tarafından vurgulanır. Web sitesinde ayrıca portföy için iyi entegre jQuery slayt gösterisi bulunmaktadır.
Balon, inek ve yumurta: 
Çift kanatlı ve jQuery portföy slayt gösterisi: 
Web formu, altbilgi ve sabit gezinme: 
14. Dreamerlines
Özellikler: Çeşitli kolajlar.
Açıklama: Dreamerlines sitesinin ayrık bir yaklaşımı vardır. GANDRweb gibi, her bölümün komşu bölümlerine yalnızca beyaz boşlukla bağlı olan ayrı bir grafik vardır. Her bölüm olsa da, eşsiz, ayrıntılı, renkli ve dikkat çekicidir. Ağır çizimler, büyük kalın metin ve arka plan boyama tonunu ayarlar.
Başlamak için büyük metin: 
Yüzünde kolaj: 
Birçok görselle çevrili web formu: 
15. Sosyal Aperatif
Özellikler: Tel, kuşlar ve toprak.
Açıklama: Gökyüzü motifi asla eskimemez ve tasarımcılar ufuklarını renklendirmek için herhangi bir sayıda paletten birini seçebilirler. Sosyal Aperatif'in ufku, belirgin bir yeşil ve kahverengi ile biraz pusludur. Kuşlar, bölümleri ayırmak için sayfa boyunca dikey olarak dağılmış tellere oturur. Web sitesi bir çatı ile bitiyor. Blogda pürüzsüz jQuery kaydırma olmamasına rağmen, sevimli karakterlere sahip eğlenceli resimli başlıktan bahsedilmeyi hak ediyor.
Üstteki renk paleti ve kuş motifi: 
Takım fotoğrafları için çerçeveler kuş teli takıyor: 
Blog bölümünde sevimli karakterler: 
Slayt
JQuery'nin en sık ve tanınabilir kullanımlarından biri saygıdeğer bir slayt gösterisi. Bir fare tıklatıldıktan sonra ekran boyunca kayan içerik gördüğünüzde ve Flash bulunamıyorsa, muhtemelen jQuery'dir. Şirket web sitelerinde, açılış sayfalarında, ajans portföylerinde, e-ticaret sitelerinde, her yerde slayt gösterileri bulacaksınız. Onlar her yerde bunlar. Aşağıda, keskin resimlerden dolayı hayatta kalan birkaç slayt gösterisi örneği bulunmaktadır.
16. GoSiteWave
Özellikler: Yatay navigasyon ve çekici simgeleri ile dikey slayt gösterisi.
Açıklama: Simgeler ve resimlerle birleştirilen dikey kaydırma slayt gösterisi, gerçek hikaye burada. Slayt gösterilerinin yatay olarak kaydırılması bekleniyor, bu yüzden tam tersi göz alıcı. Parlak maviler ve portakallar, kaygan yuvarlatılmış düğmeler ve ustaca yerleştirilmiş ışık çizgileriyle koyu arka plan efektlere katkıda bulunur. Tabii ki, simgeler çok iyi yapılmamışsa, web sitesi kesilmiş olabilir.
Ana sayfa slayt grafikleri: 
Başka bir slayt gösterisi: 
17. Sketchen
Özellikler: Önceden yüklenmiş içerik, büyük metin ve resimlerle Flash filmlerin yatay slayt gösterisi.
Açıklama: Eğer sarıdan hoşlanıyorsanız, bu siteyi seveceksiniz. Bu slayt gösterisi sarı arka planı sağlam tutan büyük kırpılmış resimlere sahiptir. Pop-up “lightbox” 'da ek bir slayt gösterisi, portföyü içerir. Resimlerin büyük olduğunu söylemiş miydim? Çok yer kaplıyorlar ama çok iyi bişeyler. Arka plan rengi ve görüntüleri, yeşil ve beyaz gezinme öğeleri tarafından vurgulanır ve keskin kontrast, kullanılabilirliğin bir sorun olmadığını garanti eder.
Megafon: 
Altbilgi: 
Elma: 
“Lightbox” içindeki portföy: 
18. Form Elli Beş
Özellikler: Düzgün dikey kaydırma, dinamik olarak oluşturulmuş blog içeriği, slayt gösterisi, ana navigasyon vurgulama,
Açıklama: Tek renkli renk paletine ve basit çizgi çizimlerin sizi kandırmasına izin vermeyin. Bu ajans sitesi her şeye sahiptir. Düzgün dikey kaydırma, içeriği kaplayan sabit bir altbilgi, bir portföy slayt gösterisi, dinamik olarak katıştırılmış blog içeriği, vb. Tüm bu işlevler bunun için gidiyor, siteyi gerçekten ayrı kılan şey, rastgele örneklerin toplam sayısıdır. Her şey çok komik. Bu satırların yanı sıra, "Hakkında" videosu çekilmeden siteye yapılan bir ziyaret tamamlanmadı.
Başlangıç ekranında birçok resim
Yazı karakterleri çizim stiliyle eşleşir
Portföy slayt gösterisi
Altbilgi gezinme başlıkları, siz ilerledikçe vurgulanır
Yatay kaydırma
Genellikle bir web sitesinin bir bölümü ile sınırlı olan slayt gösterisinden farklı olarak, yatay kaydırma (burada tanımlandığı gibi) tarayıcı düzeyinde olur veya en azından bu şekilde hisseder. Dinamik yatay kaydırma, dikey kaydırma gibi çok büyük örneklere sahip değildir; ama göreceğiniz gibi, yatay düşünen tasarımcılar büyük hayallere sahipler.
19. Seri Kesim
Özellikler: Portföy için büyük resimler; yatay ve dikey kaydırma.
Açıklama: Bu slayt gösterisi, tarayıcının görüntüleme alanını almak için gerçekten tasarlanmıştır. Sola veya sağa kayarak ilerleyemezsiniz, ancak fark eder mi? Çizimler ve tasarım, geliştiricinin krizler arası, yukarıdan aşağıya ya da herhangi bir diğer beklenmedik navigasyon yöntemine sahip olabileceği kadar öylesine olağanüstü. İnsanların hala bir sonraki adımı bulmak için çaba harcayacakları. Gerçekten yardımcı olan şey, gezinti simgesinin boyutudur ve portföy fotoğraflarının ve resimlerinin tüm ekranı kapladığıdır.
Trenler: 
CD kapağı: 
Ayakkabılı 3-D adam: 
20. Tyler Finck
Özellikler: Arka plandan oluşturulan animasyonlar ile yatay geçişler.
Açıklama: Dinamik yatay kaydırma için bir animasyon efekti oluşturmak için arka plan resmini kullanmanın harika bir örneği. Renk paleti öncelikle siyah beyazdır. Yazı biçimleri kalındır ve belirli yerlerde kalın bloklu arka planlara sahiptir ve görüntü tabanlı türün taslak görünümü vardır. Komple paket iyi çalışır.
Minimalist bir ana sayfa: 
Bio: 
Para çekimi: 
Diğer işlevselliği
JQuery kullanan bazı web siteleri kolayca kategorize edilemez. Nadir görülen özelliklere sahip olabilirler veya jQuery'nin ince kullanımını yapabilirler veya alışılmadık bir şekilde ortak bir tekniğe uyum sağlayabilirler. Ön yükleme, otomatik metin tamamlama, içeri ve dışarı soldurma ve görüntülerin üzerine metin yerleştirme, bu koleksiyondaki son web sitelerinde bulunan hilelerden bazılarıdır.
21. Turuncu Etiket
Özellikler: Görüntü ön yükleme.
Açıklama: Görüntü ön yükleme Orange Label'in jQuery kullanımını kapsamaktadır. Aşağıya doğru kaydırdığınızda, portföy öğeleri sayfaya eklenir (önceden yüklendiklerini bildiren dönen bir grafikle). Kullanılabilirlik açısından, bu kullanışlı özellik, sayfanın bant genişliği-hogging içeriğini otomatik olarak yüklemesini sağlar. Üstteki resim büyük, renkli, son derece detaylı ve lezzetli göz şekeridir.
Şekil: 
Resimde yakınlaştırılmış: 
Portföy öğesi ve altbilgi: 
22. İpek Simge Bulucu
Özellikler: Metin tamamlama.
Açıklama: Bir simgenin adını yazın ve bu web sitesi simgelerini şimdiye kadar yazdığınızların olası sonuçlarına göre sıralar. Simgelerin kalitesi oldukça iyi ve servis tümüyle oldukça uygun. Tasarım gerçekten arama sonuçlarıyla ilgili olduğu için, görsel bir dikkat dağılmasında çok küçük bir artı var.
Varsayılan görünüm: 
“Işık” için arama sonuçları: 
23. Vyniknite
Özellikler: Fades.
Açıklama: Bu web sitesi harika bir karahindiba illüstrasyonu, iyi bir düzen ve güzel yazı tipleriyle başlıyor. Tek fark edilen jQuery eylemi, sekmelerde gezinirken sönen ve çıkan şeydir. Başka bir küçük cennet dilimi, karahindiba'nin hem aktif hem de inaktif sekmelerle örtüşen yoludur. Ve arka plana yakından bakarsanız, yüzen faunaya eşlik eden ayrıntılı rüzgar swirlsleri görürsünüz.
Dandelions bolca: 
24. Halo Ajansı
Özellikler: Arka plan resmiyle otomatik slayt gösterisi; görüntüler üzerinde metin.
Açıklama: Arka planlar, arka planlar, arka planlar. Bu web sitesinde gezin ve renkli 3 boyutlu çizimlerle dolu çeşitli dekoratif öğeler bulacaksınız. Etkileyici bir portfolyoya ana sayfada jQuery slayt gösterisi aracılığıyla erişilebilir. Alternatif olarak, her bir öğeyle ilgili bilgileri, küçük resimdeki metin yer paylaşımından portföy (veya “iş”) bölümünde bulabilirsiniz.
Slayt gösterisi ile ana sayfa: 
Portfolyo, görüntülerin üzerine metin yerleştirir: 
Başka bir renkli arka plan: 
Sadece Maurice Wright tarafından WDD için yazılmış. O bir web geliştiricisi ve tasarımcısı ve yaratıcısı Moluv.com . 2000 yılından bu yana, Moluv, internette en iyi görünen web sitelerini arayan yaratıcı zihinler için bir tasarım ilham kaynağı olmuştur.
JQuery, web sitelerini tasarlama şeklinizi nasıl değiştirdi? Lütfen aşağıya yorum yapın…