飘雪效果

作者：matrix 被围观: 3,944 次发布时间：2017-01-13 分类：零零星星 | 无评论 »

这是一个创建于 2657 天前的主题，其中的信息可能已经有所发展或是发生改变。

这个季节看到TGP的LOL新闻页面的飘雪效果挺好看的。顺手就copy了下
飘雪效果网上貌似大多数代码都是http://x-team.com 。
css，js，png文件都整理出来了也就记录下。都取自15w.com

直接盗链

建议代码放到html中的body标签中的底部加载

<link rel="stylesheet" href="//www.15w.com/ui/pages/others/2016/snow/css/snow.css?v3" type="text/css" />
<script type="text/javascript" src="//www.15w.com/ui/pages/others/2016/snow/js/snow.js?v5"></script>
<script>
    createSnow("img/", 30);
</script>

若是WordPress：

add_action('wp_footer', 'snow_footer');
function snow_footer()
{

    if ('1' === date("n")) {//一月份才会有飘雪效果 
        print <<<R
<link rel="stylesheet" href="//www.15w.com/ui/pages/others/2016/snow/css/snow.css?v3" type="text/css" />
<script type="text/javascript" src="//www.15w.com/ui/pages/others/2016/snow/js/snow.js?v5"></script>
<script>
    createSnow("img/", 30);
</script>
R;
    }
}

文件本地化

文件: https://pan.baidu.com/s/1i5cAnhb#383t
提取码在＃字符后面

注意需要修改snow.js 105行处代码

peace

P.S. 180206
jd页面的飘雪效果。依赖JQ
图片3891－飘雪效果

页面中添加画布div容器
<div class="snow-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001;"></div>

然后引入js
three.js和snow.js（可修改为本地的离线图片）

资源包：jd-snow