原生 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,//值为numbersnowSpeed: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

原生 JS 实现飘雪效果相关推荐

原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
原生js漂浮广告效果
原生js漂浮广告效果静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
原生js制作动画效果
理论基础:需要获取元素的任意css属性值 getComputedStyle(element,null),支持谷歌,火狐 element.currentStyle,支持ie8 //获取任意css属性值( ...