飘雪效果
作者:matrix 被围观: 4,176 次 发布时间:2017-01-13 分类:零零星星 | 无评论 »
这是一个创建于 2892 天前的主题,其中的信息可能已经有所发展或是发生改变。
这个季节看到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
页面中添加画布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