原生 JS 实现飘雪效果

一、前言

大家也许见过到以下场景：

1. 逢年过年或活动日，各大网站（淘宝，京东等）飘着漫天红包；

2. 下雨下雪的时候美团上的外卖地图上会有飘雨飘雪的景象；

3. 手机里的天气背景有电闪雷鸣的效果；

那么这些动效是如何实现的昵？本文用原生 JS 简单实现一个漫天飘雪的效果。

二、整理思路

1. 动态增加 div；

2. div 每10秒下降3px；透明度减少0.003；

3. 当div降落到屏幕底部时，移除这个 div；

4. 重复以上操作。

三、代码如下

//1.增加div
function addChild(top,snowShape) {
    var div = document.createElement("div");
    div.innerHTML = snowShape;
    div.className = "flake";
    div.style.position = 'absolute';
    div.style.color = 'white';
    div.style.opacity = 0.9;
    div.style.left = parseInt(Math.random() * window.innerWidth) + 'px';
    div.style.top = top + 'px';
    div.style.fontSize = parseInt(Math.random() * 50) + 'px';
    document.body.appendChild(div);
};
//2.雪花自动降落
function autoWipe(snowSpeed,snowShape) {
    var flake = document.getElementsByClassName('flake');
    var timer = setInterval(function () {
        for (var i = 0; i < flake.length; i++) {
            var opacity = flake[i].style.opacity;
            var offsetTop = Number((flake[i].style.top).replace('px',''));
            if (offsetTop < window.innerHeight) {
                offsetTop = offsetTop + snowSpeed;
                opacity = opacity - 0.003;
                flake[i].style.top = offsetTop + 'px';
                flake[i].style.opacity = opacity;
            } else {
                document.body.removeChild(flake[i]);
                addChild(0,snowShape);
            }
        }
    }, 100);
};
//3.形成最后效果
function final(bigSnowParam,snowShape) {
    for (var i = 0; i < bigSnowParam.snowNum; i++) {
        addChild(parseInt(Math.random() * window.innerHeight),snowShape);
    }
    autoWipe(bigSnowParam.snowSpeed,snowShape);
};
//4.参数选择，snowNum 为每批降雪数量，snowSpeed为每批降雪速度，单位为秒
//大雪参考值
var bigSnowParam = {
       snowNum:242,
       snowSpeed:6
};
//中雪参考值
var midSnowParam = {
    snowNum:242,
    snowSpeed:3
};
//小雪参考值
var littleSnowParam = {
    snowNum:242,
    snowSpeed:1
};
//自定义雪参考值
var selfSnowParam = {
    snowNum:300,//值为number
    snowSpeed:3//值为number
};
//雪花形状参考
var snowShapeObj = {
    1:'❆',
    2:'❄',
    3:'❅',
    4:'✼',
    5:'✼',
    6:'❉',
    7:'❇',
    8:'❈',
    9:'❊',
    10:'✥',
    11:'✺'
};
//5.调用
final(bigSnowParam,snowShapeObj[1]);

四、效果图(不能上传视频，只能截图)

github 源码下载地址：https://github.com/wuxingping/snow-flutter