一旦打開就忍不住想狂點滑鼠,9 個有趣的 HTML 5 交互網站
HTML 5 的誕生已經有些時日,它向我們呈現了令人驚嘆的視覺效果。基於網頁的交互究竟能有多優秀?這些網站可以告訴你答案。
在網頁上的精美製作:MakeMePulse
MakeMePulse 連續兩年製作了基於滑鼠的交互網頁——MakeMePulse 2017 在這個頁面中,你可以看到製作精美的燈泡、拍立得、機器人、紙飛機、登月飛船這五個頁面。
同樣是 MakeMePulse 製作的 2016 MakeMePulse 年度關鍵字 網站也是類似的效果。長按頁面開始隨機選擇關鍵詞,每個關鍵詞都可以用滑鼠操作,實現很不錯的效果。即便是兩年前製作的動畫效果,放在今天依然毫不遜色,比國內的一眾測試網站要炫酷得多。
在線擰魔方:Iamthecu
Iamthecu 給我們提供了一個在線的三階魔方,支持自動打亂、自動還原、撤銷。網站交互很棒,提供了各種透視視圖,來幫助你更清楚的看到還原魔方的技巧和方法。再也不用擔心擰亂魔方沒法還原了。
如果你不滿足於三階魔方,另一個網站 Grubiks 提供了四階、五階、異形、金字塔魔方供你在線遊玩。不過這裡並不提供還原步驟演示。
隨手就能彈出節奏:Mikutap
在 初音未來 Mikutap 中隨意點擊屏幕就可以讓初音未來唱出歌曲,再加上魔性的背景音樂和豐富的動畫效果,可以組成各種各樣的節奏。
這個網頁畫風清新,非常動感,「隨便按按就能出節奏」的暢快感有如第一次在 GarageBand 中打開示例項目,讓「我也有音樂天賦」的錯覺油然而生。(笑)
網頁上的點與線:滑鼠躲避球
這是玩法不同,但表現形式類似的三個小遊戲網站——Sinuous、Core、Coil,需要用到滑鼠操作。
Sinuous 的玩法是控制滑鼠躲避來自遠方的紅點,碰到紅點或碰壁都會 Game Over。遊戲過程中還有一些道具,可以幹掉這些煩人的紅點或者驅散他們,遊戲難度分為 1-9 。我玩到難度 6 就玩不下去了,你能否打破這個記錄呢?
Core 則需要玩家控制防護罩,阻擋紅點的入侵。後期紅點太多時還可以按住空格,消耗生命達到短時間無敵的效果。是個不錯的小遊戲。
Coil 的玩法是三個遊戲中最有創意的,玩家要用滑鼠划過屏幕出現的藍線,不斷把藍點圈住。由於藍線的長度是由時間決定的,所以不僅需要準確度,速度也不能太慢。最高分玩到了 26000 分左右,歡迎挑戰。??
這三個玩法簡單的小遊戲非常適合消磨時間,如果你跟我一樣無聊就來玩玩看吧。
有趣的 HTML 5 交互:FFF.cmiscm
如果你看了上面這些網站還意猶未盡,還可以去 FFF.cmiscm 看看。
它包含了多達 15 種由 HTML 5 製作的交互動畫。包括「海浪模擬器」「時鐘」「雨刮器效果」「數山羊模擬器」「湖面倒映模擬器」等沒什麼用但很有趣的效果。
你是否也遇到過這類有意思的以交互為主的網站?歡迎在評論區和大家分享一下。
推薦閱讀: