幾個H5炫酷特效

那H5裏有哪些高級動效了？小編仔細體驗了國內很多幾個優秀H5頁面做品，整理出下面幾個H5頁面特效。咱們的H5做品若是能用上其中一兩個，相信能增色很多！

 

一、粒子特效

 

—》》一鍵爆炸

 

 

模擬現實中的水、火、霧、氣等效果由各類三維軟件開發的製做模塊，原理是將無數的單個粒子組合使其呈現出固定形態，藉由控制器，腳原本控制其總體或單個的運動，模擬出現真實的效果。做者沒有使用 canvas ，因此沒法取到圖片上每一個像素的顏色值。便使用了一些比較討（sha）巧（bi）的方法。構造新圖容器，隱藏原圖—>生成一張張是碎裂小圖—>boom 爆炸！

 

 

 

連接：http://web.jobbole.com/85543/

 

 

2.SVG路徑動畫

 

—》》水滴效果

普通的dom元素，製做圓滑曲線基本是不可能的，根據以往的積累，咱們是能夠經過svg中的<path>來描繪貝塞爾曲線，達到實現圓滑曲線的效果。因此，採用svg來製做整個類水滴的索引組件是很好的解決辦法。

 

 

連接：http://ued.baidu.com/?p=4959

三、序列幀動畫

—》》大衆點評：咱們之間只有一個字

做品解析：

逐幀動畫相似與電影的播放模式，很適合於表演細膩的動畫。例如：頭髮及衣服的飄動、走路等等。序列幀動畫是隻在時間軸的每幀上逐幀繪製不一樣的內容，使其連續播放而成動畫。

連接：http://www.epub360.com/search?q=一個字

 

4.Cinemagraphic

—》》Levi's: 「換」醒你的夏天

Cinemagraphic是一項將神奇的局部運動賦予靜態照片的新技術。該應用恰到好處地了詮釋了「天然風」的概念，做爲互動者的人們，當看到畫面上被風拂過的Cinemagraphic動態場景，他們也身臨其境地感覺到天然風所能帶來的這種清爽感覺。

連接：http://cool.levi.com.cn

5.全景

—》》杜蕾斯的第一座美術館

杜蕾斯「美術館」的創新，在於它實際上是熱門廣告形式H5頁面的假裝。「咱們想要經過多重手段（好比館內的彩蛋、12 點閉館沒法訪問等等）來創造一個虛擬的真實空間，而不是傳統H5的單線程教育的邏輯。」 Socialab 杜蕾斯組的負責人說，「液體主義羣展將是杜蕾斯美術館無數展覽中的第一個。」

 

6.3D

—》》康師傅：2015最飛羊的新春祝願

夜空繁星中題字燈籠飛來飛去的3D炫目效果，祝福燈籠還能夠360旋轉呈現，「最飛羊的新春祝願」的主題表現的淋漓精緻。

連接：http://old.vmlim20.com.cn/demo/2015cny/

7.點擊碎屏

—》》大衆點評：這個陌生來電你敢接嗎？

「擊屏幕」畫面好像很討人喜歡，大概有三輪左右的「擊碎」動做，這是整個H5的互動高峯。另外手機來電也應用到了不少H5的功能上。

連接：http://evt.dianping.com/8809/index.html

8.長按逐字

—》》一加手機：1步1步看清韓寒

這個頁面用打字機的形式呈現，觸發逐字等動效很真實，用戶按下按鈕後，紙片會逐漸顯示出韓寒從1999年起的成長軌跡。

連接：http://wx.oneplus.cn/mrx/