飘雪效果

作者: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
图片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

其他文章:
本文固定链接:https://www.hhtjim.com/snow-effect.html
matrix
本文章由 matrix 于2017年01月13日发布在零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:飘雪效果-HHTjim'S 部落格
关键字:

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!