Zhouyao's Blog

Do Something Big With Us

代码实现页面下雪效果

《代码实现页面下雪效果》

最后更新于 2017.11.14 09:41

起因

看到土豆的博客中有下雪的效果,于是也想搞一个,但是我的主题并没有使用GreenGrapes2,所以必须想个办法看看怎么调用下雪的这个效果。

在这里使用了两个方法,选哪一个都可以。

个人推荐第二种,因为第一种的确没有什么影响,不过对于强迫症来说还是比较难受的,尤其是在进行开发者模式中,对于调试者的体验来说还是比较差的。

Demo

相关资料在本文最下方。

干活

方法一

方法一是采用纯代码方法,不采用任何js和css脚本,在header.php/footer.php/single.php中均可使用,直接调用图片‘snow.png’,然后利用随机数进行屏幕的随机落下,雪花的大小为使用者感觉雪花距离自己的远近。

代码如下:

把这段代码贴到header或footer中,如果仅仅只想在文章页中显示,粘贴到single页中就可以。

缺点:

如下图所示,采取这种类型的下雪效果,会在开发者模式的Elements中不断地刷新,会导致查看数据困难。

《代码实现页面下雪效果》

 

方法二

方法二是在TG中询问了一下土豆,先到Git上把土豆的three.js和snow.css下载下来,悄悄地偷来的还有snow.png.

头部引入snow.css,尾部引入three.js,加一个div,class为snow,然后再来那段JavaScript函数就可以了

那就开始干活吧~

在header中添加如下代码:

《代码实现页面下雪效果》

 

在footer中添加如下代码:

在</footer>结束后插入代码块

《代码实现页面下雪效果》

这样就可以做出一模一样的下雪效果了。

注意

在第二种方法中,snow.css和three.js,权限设定均为766,文件所属和组改为www,否则会不能实现相应的代码效果。

资料分享

Github传送====>https://github.com/AKILLII/Sharing/tree/master/Snow

有问题TG,Email均可

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

34 + = forty

This site uses Akismet to reduce spam. Learn how your comment data is processed.