JQuery+Html5实现超真实3D雪花飞舞特效

2016-12-28 18:26 来自本站原创 19,793 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见鬼去吧!!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:9   其中:访客  7   博主  2
    加载中...
    1. 白起 1
      8个月前 (12-28) 7楼

      博主,请问那个snow.js应该从哪下载呀?纯小白路过。。。

    2. 2年前 (2017-01-01) 6楼

      不错,过来点个赞支持一下先!

    3. 2年前 (2016-12-30) 5楼

      很有冬天的气氛哦

    4. 2年前 (2016-12-29) 4楼

      记得以前搞过一次雪花可以堆积在页面上的效果,几年了,忘记咋弄了, [晕]

      • 飞鸟
        2年前 (2016-12-30)  地下1层

        @何先生: 那厉害了哦,不过雪花“下”太久,会不会把整改屏幕淹没了 [偷笑]

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

      也就冬天,或是冬天节日的时候用用,我就懒得部署了。再则生在南方广西桂林的我,都已经好多年没见咱们这下雪了,假如看到自己的博客雪花纷飞反倒觉得不习惯,呵呵 [呲牙]

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

      确实挺真实的,看起来效果很不错

    7. 2年前 (2016-12-29) 沙发

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

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    9 4 19,793
    Top