50個令人嘆為觀止的JavaScript應用站點

隨著諸如 jQuery, Mootools, Prototype 一類的 JavaScript 框架的崛起,Web 開發者們基于這些框架創建了眾多令人嘆為觀止的效果。以下的50個站點全部基于 JavaScript,卻擁有 Flash 一樣的絢麗效果。在很多 Web 開發者看來,Flash 并不是他們的首要選擇,因為 Flash 至今對搜索引擎仍是不透明的,另外,Flash 的渲染需要瀏覽器插件,而 JavaScript 的一切都是本地的。

Tabs

Aviary - http://aviary.com/

aviary

Aviary 使用了非常圓潤的 Tab 效果,點擊 Tab 后,漸出漸入的欄目介紹性內容非常漂亮,它的基于 JavaScript 的下拉菜單也美輪美奐。

Toolani - http://www.toolani.de/

toolani

黃色內容區塊下方的,基于 jQuery 的 Tabs 非常漂亮。

Podcasttuneup - http://www.podcast-tuneup.com/

podcasttuneup

漂亮的 Tab 帶著有趣的上卷與下卷效果。作為對比,該 Tab 框上方還有一個基于 Flash 的 Tab 框,可以看出,Flash 的反應速度明細要快得多,然而卻要等半天的時間加載。

Adworks - http://www.adworks.ro/

adworks

盡管這些 Tab 并不象前面提到的那幾個,帶漸入濺出效果,但那些大圖標實在惹人喜歡。

We are Sofa - http://www.madebysofa.com/

wearesofa

如果你想用文字式 Tab 這個網站是個很好的例子。

幻燈式內容

monofactor -http://www.monofactor.com/

monofactor

這個重新設計后的站點使用幻燈風格展示作者的作品。

Alex Buga - http://www.alexbuga.com/

alexbuga

Alex Buga 自詡為 Web 設計超級明星,使用了類似幻燈片的方式展示他最近的活動。位于右上角的那個主導航條也很 Cool,不過該站點大量使用了 Ajax。

Coda, one Window Web development - http://www.panic.com/coda/

coda

這個站可謂家喻戶曉。是很多人獲得靈感的地方。

Kobe - http://www.arcinspirations.com/kobe/

arcinspirations

漂亮的幻燈式內容效果,并結合了 Flash。(該站使用了單頁式設計)

Dibusoft mmdv - http://www.dibusoft.com/

dibusoft

Dibusoft 使用了水平滾動圖片加垂直滾動文字使用內容的幻燈式變換。它的主菜單則使用 JavaScript 實現 Lava Lamp 效果。

Jason Julien - http://www.jasonjulien.com/

jasonjulien

Web 設計師 Jason Julien 使用水平滾動的方式來顯示各個欄目下的內容。

engage interactive - http://www.engageinteractive.co.uk/

engageinteractive

 

Juanid W. Hanif - http://www.jwhanif.net/

juanidw

這個位于紐約的 Web 設計師 Juanid W. Hanif 的網站給人的總體感覺很不錯。

Omnitech incorporated - http://www.omnitech-inc.com

omnitech

Omnitech 的垂直垂直滾動式幻燈內容非常棒。

Quicksnapper - http://www.quicksnapper.com/

quicksnapper

Today's Websnap 里的幻燈內容

Josh Smith - http://www.joshsmith.ca/

joshsmith

不仔細看,還以為是 Flash 效果。

Qlear Interaction Design - http://www.qlear.nl

qlear

大量的幻燈式內容,整體效果很漂亮。

Giant Creative - http://madebygiant.com/

giantcreative

Tap Tap Tap - http://www.taptaptap.com/

taptaptap

 

Hotel Oxford - http://www.hotel-oxford.ro/

oxfordhotels

這個站的效果看上去象 Flash, 也擁有 Flash 一樣的行為,然而卻是 JavaScript。

單頁式網站

以下幾個站點的共同點就是大量使用滾動窗口,甚至有些濫用了。

Bryan Katzel - http://www.webleeddesign.com/

bryankatzel

Melissa Hie - http://melissahie.com/

mellisahie

volll humane communication - http://www.volll.com/

volll

you love us -http://youlove.us/

youloveus

Tomas Pojeta -http://www.pojeta.cz/

tomaspojeta

Carrot Creative - http://carrotcreative.com/

carrotcreative

Nofrks Design Studio - http://www.nofrks.com/

nofrks

Viget Labs - http://www.teamviget.com/

vidgetlabs

Danny Blackmann - http://dannyblackman.com/

dannyblackman

my kinetic Kreations - http://www.neftysworld.com/

kineticcreations

DJ Folio - http://www.djfolio.com/

djfolio

Jade Records - http://www.jedarecords.it/

jedarecords

authenticstyle - http://www.authenticstyle.co.uk/

authenticstyle

Trashstars - http://www.trashstars.com/

trashstars

Designflavr - http://www.designflavr.com/

designflavr

h4×3d.com - http://www.h4×3d.com/

haxed

 

雜效

phpcli - http://cliframework.com/

phpcli

Vitamin j Kommunikation - http://www.vitamin-j.de/

vitaminj

Komodomedia - http://www.komodomedia.com/

komodomedia

Kyan - http://kyanmedia.com/

kyan

Green any Site - http://www.greenanysite.com/

gas

Playground Blues - http://www.playgroundblues.com/

playgroundblues

CSS moon - http://www.cssmoon.com

cssmoon

Creatividad - http://2d2.es/creatividad/

creativdad

Dragon Interactive - http://dragoninteractive.com/

dragoninteractive

Marius Roosendaal - http://www.mariusroosendaal.com/

mariusroosendaal

paramore|red online marketing - http://paramoreredd.com/

paramorellred

Pikaboo - Where Ideas Grow - http://www.pikaboo.be/

pikaboo

Nebonmedia - http://www.nebonmedia.com/

nebonmedia

Helldesign - http://helldesign.net/

helldesign

本文國際來源:http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript
中文來源:COMSHARP CMS 官方網站





評論
...
發表評論


用戶


評論(不超過1000字)


 6 - 6 = ? 請將左邊的算術題的結果填寫到左邊的輸入框  


  發送給朋友| 打印友好
7 x 12 小時服務熱線
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp