10款令人驚奇的HTML5和javascript效果。回到幾年前,這些效果是根本不可能實現,只能用flash做,但是現在,已經很輕鬆的就可以實現了。
1. Breathing Galaxies
使用鍵盤來改變形狀中的線條樣式,或移動滑鼠來建立一個新的形狀。
查看:http://mudcu.be/labs/JS1k/BreathingGalaxies.html
2. Noise Field
移動滑鼠來改變粒子的運動。點擊隨機產生參數。
查看:http://www.airtightinteractive.com/demos/processing_js/noisefield08.html
3. Keylight
根據按鍵放置的位置不同來產生不同的單調。
查看:http://hakim.se/experiments/html5/keylight/03/
4. Swirling Tentacles
迴圈產生彩色不同顏色的三維線。
查看:http://acko.net/dumpx/996b.html
5. FlowerPower
來自於大自然另一個靈感——使用貝賽爾曲線做為筆刷繪圖工具花朵,使用滑鼠點擊或拖動均可看到效果。
查看:http://www.openrise.com/lab/FlowerPower/
6. Blob
一滴可以在螢幕上拋擲的柔軟的水泡,它可以在瀏覽器視窗中彈跳。這個水泡可以分割成許多小水滴(雙擊),如果他們碰撞小水滴們還會合并成一個大水滴。
查看:http://hakim.se/experiments/html5/blob/03/
7. Rotating Spiral
獨立旋轉螺旋的效果——簡單,但視覺吸引力。點擊開始,停止和扭轉旋轉。
查看:http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg
8. Magnetic
磁點是用來控制粒子流。如果有很多粒子圍繞磁鐵,它會輻射的顏色和大小的增加。滑鼠雙擊操作。
查看:http://hakim.se/experiments/html5/magnetic/02/
9. Trail
五顏六色的粒子跟隨滑鼠並在滑鼠周圍旋轉,同時產生一個有機的痕迹,然後慢慢地淡出。
查看:http://hakim.se/experiments/html5/trail/03/
Graph Layout
一種互動式力向圖的布局。
查看:http://canvas-test.appspot.com/
原文連結:http://www.woiweb.net/10-jaw-dropping-html5-and-javascript-effects.html
【編輯精選】
- 20個HTML 5和CSS3的免費網站模板與教程
- HTML 5的新標誌:你怎麼想?
- 10個國外開發的HTML 5精彩應用
- JavaScript初學者應注意的七個細節
- JavaScript記憶體回收機制深入解讀
【責任編輯:陳貽新 TEL:(010)68476606】