HTML5 有哪些讓你驚艷的 demo？

12-12

印象中看過一個用HTML5做的3D立體書（不是Google那個），當時覺得很驚艷，可是後來再也找不到了。
知乎上的你們看到過哪些讓你覺得驚艷的Demo呢？

找不到之前所見過的網頁，深有同感！
Animated Books with CSS 3D Transforms 這是一個3D書本，CSS3完成

=========HTML5特效聚集網站========
christmasexperiments.com 的頁面
chromeexperiments.com 的頁面
Mr.doob
litewerx.showcase
Form Follows Function
AlteredQualia
html5rocks.com 的頁面

===========視覺特效與互動式視頻============
http://www.thewildernessdowntown.com/
Interactive Film "itsumo kawaii"
http://www.beonlineb.com/
Arcade Fire / Just a Reflektor
Aaronetrope 3D科幻視頻投影對話
Aleksandar Rodic 3D立體博客
Beanstalk
http://www.ro.me/
three.js webgl 動態地圖
? Green by SPECIAL.T 水中植物廣告
Kimatica - Creative Connections 樹脈
Earth to Echo 電影科幻宣傳網站
http://middle-earth.thehobbit.com/map 霍比特人
HelloRun? 線稿房間，第一人稱動
LETTERS, INC. 集成電路
Dataveyes | Human Data Interactions 視覺粒子

=========音樂與可視化==========
http://do.adive.in/
Rocking dendrites 搖滾與觸手
Arabesque - Music Colour Particles 優美的純音樂與彩色煙霧
compo.filler 藍電之音
Lights 波點
??berViz 電子
A [ Radiohead 音樂畫畫

=========物理特性元素============
Blob 大水球
Andrew Hoyer 布-骨架
HTML5 Fish Bowl IE-魚缸
googlecode.com 的頁面 chrome-水族館
three.js webgl 動物
Liquid Particles 3D 3D粒子流

==========畫繪與生成===========
10 Jaw Dropping HTML5 and Javascript Effects 10個畫繪特效
wormz . html5 canvas experiment 圖片生成毛毛蟲~~
Silk – Interactive Generative Art 光效
Sketch Toy: Draw sketches and share replays with friends! 記錄線稿步驟
ASCIIFlow Infinity ASCII字元生成圖表

========一些融入了HTML5的網站=======
Andrew McCarthy 滾動動物奔跑
http://tokyomildfoundation.com/ 東京溫柔基金
fifty-five | the data agency 垂直分割
A P R I L Z E R O 數據分析
Gaming Media 創意橫向滾動
Luxaqua | Aquarium Design 深邃海底縱向滾動
KILFISH 鬼畜縱向滾動
有顆梅，在台灣食品縱向滾動
Vespillo le film Vespillo縱向滾動
Exploring Moon Bears IE-月熊志
Metal Junk: The Game HTML5遊戲：金屬廢墟，遊戲就不展開了~~

cocos-creator 整個 ide 都是 html5 寫的。

Internet Explorer 11 Test Drive

註：原來的wallpaperPCmobile網址已經失效了，好可惜這麼好一個網站┓( ′?` )┏，推薦我發現國外另外一個完完全全基於HTML5的神器（真的神器）吧：Smart Resize: Smart Resize ，中文版： Smart Resize中文版

這是一款完全基於HTML5的批量裁剪圖片利器，我們經常要批量裁剪大量圖片到指定尺寸，比如攝影愛好者、新聞工作者等等，往往要下載一些軟體安裝到電腦中，繁瑣麻煩，有沒有免費的在線工具呢，國外這款工具就專為此需求而生：

這款Smart Resize有多強悍呢，下面我來給你娓娓道來：

市面上很多在線圖片裁剪工具都是如此流程：（選定尺寸 &> 上傳圖片到伺服器-&>伺服器進行裁剪-&>伺服器返回裁剪後的圖片到瀏覽器供用戶下載），整個過程非常耗時，而且數碼相機拍的照片非常大，不是上傳及下載非常緩慢，就是超過了伺服器最大文件大小限制，若再來個批量處理，這耗時不敢恭維。這時候Smart Resize則應運而生，完完全全至始至終都在您的瀏覽器中進行裁剪，這樣一來就有兩個好處：一是速度極快，無需上傳和下載；二是安全，因為沒有上傳圖片到伺服器啊！你的私密照片都可以在裡面處理。由於Smart Resize源代碼很小，總共就幾百kb，真正的實現了像微信小程序那樣的「用完即走，無需下載」的概念。但缺點也是有的，就是瀏覽器必須支持HTML5才行，我測試了該工具在Firefox和chrome中表現很好，IE不支持，edge和國產的什麼360瀏覽器之類我也沒測試過。
Smart Resize為達到你滿意的裁剪效果，提供了很多裁剪縮放圖片的方式，比如：固定尺寸、固定比例、最大寬度、最大高度以及縮略圖等等，和其它批量裁剪工具不一樣的是，Smart Resize能智能識別一個照片的主次部分，這個在批量裁剪中是非常方便實用的，你無需人工干預，Smart Resize對每張圖片就能分清楚哪個部位是主要的必須裁剪，哪些是次要的可有可無，同時，Smart Resize還能智能識別圖片中的人臉，並將其加入到主次識別的演算法中去，這一切都全部基於HTML5!也就是說，還是在你本地瀏覽器中進行的，不信的可以F12抓包分析，現在我們測試一張圖片，尺寸：960x640：

可以看到主體在左側，為區分普通裁剪，我們用Smart Resize裁剪成豎直的解析度比如240x320吧，這是裁剪後的結果：

再來測試一張，尺寸：960x640：

圖片里的最主要部分在右側，好了，我們還是提高難度裁剪成240x320這種豎直解析度看Smart Resize能不能識別出主體來：

再來一張，尺寸：800x450：

裁剪成正方形尺寸300x300吧，Smart Resize給我的結果：

同時，裁剪完後的圖片，會以zip形式下載，不用擔心，壓縮圖片也是基於瀏覽器完成的，不會上傳到伺服器

Smart Resize也提供了單張圖片裁剪功能：

這一切的都是免費的！！！這一切的都是免費的！！！這一切的都是免費的！！！重說三

此神器已經安安靜靜躺在我瀏覽器的書籤里了

最近寫的基於 HTML5 的指南針和水平儀：H5Compass iPhone 5s/5c 測試可用。

最近看到一個驚艷的HTML5網站，In Pieces - 30 Endangered Species, 30 Pieces.
截圖如下：

http://codepen.io

八個月前在玩VR的時候，看到了這個Demo: three.js - Oculus Rift

原來還可以這麼玩。。。

Codrops | Useful resources and inspiration for creative minds
Tutorialzine
上面有很多的Demo，質量都很高，開源免費可商用

還有CodePen - Front End Developer Playground Code Editor in the Browser，像是前端界的github

3D立體書Codrops上有幾個，不知道是不是你找的：
Animated Books with CSS 3D Transforms
3D Shading with Box-Shadows
3D Book Showcase

http://www.ro.me/
這個這個!

http://www.chromeexperiments.com/webgl

這裡貌似要翻牆

看了看上面諸樓，特別是舒樂熊同學的回答我之前印象深刻的都有提到

厚著臉皮貢獻下半年前求婚做的網站，webgl+canvas 地球上的祝福

------------------------2016增加--------------------------

增加3個網站 Blog.ZhouNingyi 個人作品展示網站
http://hotu.co html5在線畫板
3D Color Analysis 顏色分析工具（最好翻牆快一點）

3D立體書通過JS+CSS3做吧，不是HTML5。

http://slides.html5rocks.com/#landing-slide
html5 的presentation ，記得當時還自己仿照這個做了一個ppt上課展示，羞死了……

35個新鮮和鼓舞人心的HTML5組合網站

那是一個沒有加班百無聊賴的正常夜晚，鐘錶的滴答聲在寂靜的房間里有節奏的重複著，漆黑的一居室只有一絲電腦屏幕的亮度，把我的臉映的蒼白，眼鏡里的反光夠發現，我正在漫無目的的瀏覽著網頁。那時的我已經從事前端有些年頭了，每天接觸的都是一些大同小異的電商網站，有滑不完的樓層，看不完的分類和永遠裝不滿的購物車。

「唉，沒意思」，說罷我點上一支煙，猛吸了兩口，再將口中的煙一口全吐在了屏幕上面，筆直的藍色煙霧在碰到屏幕的一瞬間四散飄去，最終消失在了天花板上。被煙熏到皺眉的雙眼在屏幕上漫無目的的瀏覽著，滑鼠跟隨著視線移動著，在一些不經過大腦思考的一頓點擊之後，我進到一個載入速度巨慢的網頁，網頁一片空白，平時的正常操作便是點擊關閉看別的網頁。當我的游標移到關閉按鈕時，我瞟了一眼瀏覽器地址欄，看到了github這個單詞，出於程序員的本能，對github這個單詞很是親切，於是我沒有點擊關閉，選擇了默默的等待。

頁面是先是黑色的背景，然後左下角顯示出了FPS（美妙傳輸幀數），看到這些我更加的好奇，一直盯著屏幕等待頁面效果的出現，手中的香煙也自己燃了半截，沒抽一口。忽然瀏覽器中出現了一個風景圖片做的背景，這種背景是在電腦自帶的背景中很常見的，充滿了好奇的雙眼頓時暗淡了許多，我把右腳抬起踩在了椅子上，下巴頂在右腿的膝蓋上準備關閉網頁，三個立體水滴出現在了屏幕上，水滴在屏幕上不規則的運動著，兩個水滴一旦接觸就會融為一滴，之後又會因為運動的方式不同再分開，過程十分流暢和自然，並且，水滴表面還有折射完陽光後的彩色光，同時能清楚的看到後面背景的倒影，並且會根據位置形態的不同產生的樣子。那是我第一次見到這樣的demo，雖然沒有任何的交互在裡面，但是我還是驚呆了，我放下右腿把臉湊向屏幕，嘴巴已經不自覺的張開，就像宅男第一次看到小電影的樣子一樣。我的眼睛一直盯著這三個水滴，久久不能自拔。隨著一聲驚嘆的卧槽，我把燃盡的煙頭抽了最後一口扔進了煙灰缸里，但視線一直沒有離開過屏幕。然後我發現，這個水滴竟然還能放大後面的背景時，我徹底被這這個demo給征服了，然後又是一聲驚嘆的卧槽！不光運動完全符現實情況，就連細節都完全和物理學相吻合，我一定要看看他的源碼。

我一定要看看這是怎麼做到的，我根據網頁地址找到了這個demo的源碼，原來實現它的是Three.js，一個專門來實現3D特效的js框架，原來是屬於我js的範疇，簡單看了幾眼之後發現其實也沒有太大的難度，就是掌握好運動的原理和Three.js的api就行，沒有仔細看完，我便迫不及待的去看了別的demo，每個都驚艷到了我，完全就是一種全新的瀏覽體驗，有海底世界的，還有根據谷歌地圖做的3D版的地圖，並且還可以在上面做遊戲，後期我又發現，它還能夠實現Web端的VR場景特效，簡直太強大了，那晚就是在一聲又一聲的卧槽中度過的。

現在看把看Three.js的demo作為我工作之餘的一個放鬆。當然，如果想搞定它，還是得有很強的js功底。所以建議大家，如果真的感興趣的話，想做的話可以先從javascript下手。

好了，就這麼多吧。

某次的Google Doodle ，那個魔方。。。

以下大部分demo明河在以前的html5demo推薦中都有提到過，這篇算是集大成者，html5的大部分特性在這些demo中都有體現。
1. Tunneler