前言
冬天到了，在浏览网页时，难免会遇到一些带有下雪效果的网页。
有小伙伴问到：“那个雪花特效好做吗？”
em...我们一起来试试吧！
为了方便阅读，我将文章简单分成两部分
首先我找了和平精英官网，以它满屏雪花为例。选它主要是个人觉得挺好看的。如下效果
截图来源于和平精英官网
看人家怎么写
首先，查看一下HTML
从上图可以得出几个结论
- 每一片雪花对应一个
img元素，并且所有的雪花都是同一张图片 - 通过
js动态控制雪花的大小及位置，而且我们可以猜测出，雪花的数量应该也是由js控制的
接着，找到“下雪”相关代码
snow()
/*雪花飘落*/
function snow() {
$(document).snowfall({
image: "//game.gtimg.cn/images/gp/web201908/flake_black.png",
flakeCount: 50,
minSpeed: 0.7,
minSize: 3,
maxSize: 20,
});
setTimeout(function () {
$('#element').snowfall('clear');
}, 300000000);
}
通过上述源码，我们可以得出：核心函数snow需要依靠snowfall函数。并且我们可以猜测，snowfall可能是由jQuery或者基于jQuery的一个插件提供的。
另外，可以看到snowfall可以接受一个字符串，也可以接受一个对象作为参数。我们可以进一步猜测，如果接受一个字符串clear作为参数是表示扫雪。如果接受一个对象，image表示img元素的src，flakeCount表示雪花数量，minspeed表示最小速度，minSize表示最小尺寸，maxSize表示生成雪花的最大尺寸，除此之外应该还有其他配置
为了验证我的说法，我去查找snowfall
可以看到
(1) 引入了一个snowfall.jquery.min.js的文件
(2) 引入了jQuery-1.9.1.min.js
确实进一步验证了我的猜测：snowfall可能是由jQuery或者基于jQuery的一个插件提供的
了解jQuery的伙伴都知道jQuery中并没有snowfall方法，所以snowfall就是由snowfall.jquery.min.js提供的
但我想去看看snowfall源码，找了两分钟，在github了解了它的详细使用。
并且选项确实跟我们猜测的那样，下面是所有配置选项
flakeCount,flakeColor,flakeIndex,minSize,maxSize,minSpeed,maxSpeed, round, shadow
关于snowfall的更多详情可移步：https://github.com/loktar00/JQuery-Snowfall
经上述我们明白了和平精英官网满屏雪花实现原理，其实就是利用snowfall函数来批量生成指定数量的不同大小、不同下落速度的雪花。下面我们就借用snowfall来实现自己的全屏雪花
模拟实现全屏雪花
其实很简单，只是调用一个函数。代码如下
<!DOCTYPE html>
<html lang="zh">
<style>
body {
/* background:#2d0f0f url(images/smashing.jpg) top center;background-repeat:no-repeat; */
background-color: #add8e6;
}
</style>
<body></body>
<script src="./jquery.min.js"></script>
<script src="./snowfall.jquery.js"></script>
<script>
$(document).snowfall({
image: "images/flake_black.png",
flakeCount: 20,
minSpeed: 0.7,
minSize: 3,
maxSize: 20,
});
</script>
</html>
代码效果如下
上面效果是鹅毛雪，如果想让雪下大一点，可以改变雪的数量
如：flakeCount: 100
除此之外可以将速度加快一点，大雪纷飞
如：flakeCount: 150，minSpeed: 3
以上满屏雪花的实现原理和个人模拟实现的全部内容，其实还可以做很多效果，可以根据需要多多尝试。
注：
代码已上传到个人github ，对snowfall感兴趣的，可以读读snowfall源码
网友评论