JQuery+Html5實現超真實3D雪花飛舞特效

2016-12-28 18:26 來自本站原創 22,092 9 4
[摘要]

今天分享一個特別棒的下雪特效,該雪花特效在頁面中構建了一個3D雪花場景,在里面制作出非常有層次感的雪花飛舞效果,并且可以通過鼠標和雪花場景進行互動。

過了圣誕迎來元旦,再接著很快就春節了,北方已早下了幾場大雪了,一直都想給網站弄個下雪特效。去年圣誕之際雅兮網就部署了下雪特效,不過說實話效果并不是特別理想。詳情請看《純代碼為WordPress添加雪花飄落效果》

不理想的原因是下雪特效實現功能代碼比較古板,原理就是不斷向頁面加載雪花圖片,控制雪花大小和飄落速度,但整個感覺卻不是特別的吸引人。但是下面我分享這個特效,卻顛覆了傳統的雪花特效,采用JQuery+Html5來實現的超真實3D雪花飛舞特效。

JQuery+Html5實現超真實3D雪花飛舞特效

我們先來看一段demo,(當前雅兮網已經部署了該特效,直接查看效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>JQuery+Html5實現超真實3D雪花飛舞特效</title>
 <style type="text/css"> *{margin:0;padding:0;border: 0;font-family: 'Microsoft Yahei';}
 .wrap{width: 1200px;margin: 50px auto;text-align: center;}
 .wrap font{font-size: 80px;color: #fff;}
 .wrap img{margin-top: 50px;width: 100%;}
 </style>
</head>
<body style="background-color: grey;">
 <div class="wrap">
 <font>雅兮網-yaxi.net</font>
 <img src="img.jpg">
 </div>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="snow.js"></script>
 <style type="text/css">
 .snow-container{
 position:fixed;
 top:0;left:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:100001;
 }
 </style>
 <div class="snow-container"></div>
</body>
</html>

在線DEMO

怎么樣?是不是很特別。實現起來是非常簡單的,因為原作者已經高度整合了特效代碼,我們只需要將如下代碼放入<body>后即可,推薦放在底部,不影響別的內容加載。

<!--3D飄雪花特效 整理by yaxi.net-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="snow.js"></script>
<style type="text/css">
.snow-container{
 position:fixed;
 top:0;left:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:100001;
 }
 </style>
 <div class="snow-container"></div>

上述<style></style>你可以寫入樣式表,也可以直接丟入頁面,看你喜歡。snow.js文件請自行下載,并修改文件路徑。本站開啟防盜鏈,直接引用會失效。如果你的頁面已經引入了JQuery.js庫,那第一段就不需要了。

刷新頁面,是不是瞬間有種大雪紛飛的感覺了?

snow.js文件下載地址:

點擊下載?? 密碼:9l44

該JQuery插件特效是2015年京東為配合雙12年終盛宴活動在活動頁面添加的雪花飛舞3D視覺特效。該雪花特效在頁面中構建了一個3D雪花場景,在里面制作出非常有層次感的雪花飛舞效果,并且可以通過鼠標和雪花場景進行互動。

喜歡的話就部署到你的網站吧,該特效適合所有web站點,但一定要先載入JQuery庫。另外舊版瀏覽器對H5支持不好,所以此特效僅支持現代瀏覽器,讓IE見鬼去吧!!

本文最后更新于2017年12月28日,已超過 1 年沒有更新,如果文章內容或圖片資源失效,請留言反饋,我們會及時處理,謝謝!

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 聲明:凡注明“本站原創”的所有文字圖片等資料,版權均屬 雅兮網 所有,歡迎轉載,但務請注明出處;
    目前評論:9   其中:訪客  7   博主  2
    加載中...
    1. 白起 1
      2年前 (2017-12-28) 7樓

      博主,請問那個snow.js應該從哪下載呀?純小白路過。。。

    2. 3年前 (2017-01-01) 6樓

      不錯,過來點個贊支持一下先!

    3. 3年前 (2016-12-30) 5樓

      很有冬天的氣氛哦

    4. 3年前 (2016-12-29) 4樓

      記得以前搞過一次雪花可以堆積在頁面上的效果,幾年了,忘記咋弄了, [暈]

      • 飛鳥
        3年前 (2016-12-30)  地下1層

        @何先生: 那厲害了哦,不過雪花“下”太久,會不會把整改屏幕淹沒了 [偷笑]

    5. 3年前 (2016-12-29) 板凳

      也就冬天,或是冬天節日的時候用用,我就懶得部署了。再則生在南方廣西桂林的我,都已經好多年沒見咱們這下雪了,假如看到自己的博客雪花紛飛反倒覺得不習慣,呵呵 [呲牙]

    6. 3年前 (2016-12-29) 椅子

      確實挺真實的,看起來效果很不錯

    7. 3年前 (2016-12-29) 沙發

      我好像昨天在你網站上看到效果了,不錯!

    發表評論

    疑問 調皮 難過 摳鼻 嚇 微笑 可愛 壞笑 驚訝 發呆 疑問 大兵 偷笑 咒罵 發怒 白眼 鼓掌 得意 擦汗 親親 大哭 呲牙 暈 強

    分享 9 4 22,092
    Top dhc篮彩双层皂盒