JS实现炫酷雪花飘落效果


Posted in Javascript onAugust 19, 2020

用js实现漂亮的雪花飘过效果:

JS实现炫酷雪花飘落效果

步骤:

页面基本样式,雪花旋转动画效果

body{
 width: 100vw;
 height: 100vh;
 background-color: #000;
 overflow: hidden;
 user-select: none;
 -webkit-user-select: none;
}
.snowAnimation {
 animation: snow 5s infinite linear;
 -webkit-animation: snow 5s infinite linear;
}
@keyframes snow {
 0%{
 transform: rotate(0);
 }
 100%{
 transform: rotate(360deg);
 }
}
@-webkit-keyframes snow {
 0%{
 transform: rotate(0);
 }
 100%{
 transform: rotate(360deg);
 }
}

创建雪花,添加样式

let snowDiv = document.createElement('div') // 创建div
snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画
snowDiv.style.position = 'absolute'
snowDiv.style.top = '0'
snowDiv.style.left = '0'
snowDiv.style.color = '#fff'
document.body.append(snowDiv) // 插入到页面

JS实现炫酷雪花飘落效果

接下来,让元素飘落

animated(snowDiv) // 传入创建的元素

// 动态增加元素top值,
function animated(div) {
 div.timer = setInterval(() => {
 div.style.top = 10 + div.offsetTop + 'px'
 },50)
}

接下来,给元素添加随机生成的初始化效果

let minSize = 10 // 生成的最小元素
let maxSize = 50 // 生成的最大元素
let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度

snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机大小
snowDiv.style.opacity = randomOpacity // 元素随机的不透明度

下一步,添加生成元素的随机位置,并且保持可视区域内活动

let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页面可视化宽度
let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页面可视化高度
let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条,控制不会溢出,页面可视化宽度 - (元素最大宽度 + 最大宽度/2)

snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内生成元素
animated(snowDiv,visualHeight) // 传入创建的元素

// 动态增加元素top值,当元素超过可视化区域,remove元素
function animated(div,visualHeight) {
 div.timer = setInterval(() => {
 div.style.top = 10 + div.offsetTop + 'px'
 if (Number(div.style.top.replace('px','')) > visualHeight - 80) {
 clearInterval(div.timer)
 document.body.removeChild(div)
 }
 },50)
}

基本完成:生成一个随机大小/不透明度的元素,并且在可视化区域内飘落

下一步,复制生成多个元素:cloneNode()

let minSize = 10 // 生成的最小元素
let maxSize = 50 // 生成的最大元素
let delay = 100 // 生成元素的间隔时间
let snowDiv = document.createElement('div') // 创建div
snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画
snowDiv.style.position = 'absolute'
snowDiv.style.top = '0'
snowDiv.style.left = '0'
snowDiv.style.color = '#fff'
let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页面可视化宽度
let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页面可视化高度

setInterval(() => {
 let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条,控制不会溢出,页面可视化宽度 - (元素最大宽度 + 最大宽度/2)
 let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度
 let speed = 5 + Math.random()*5 // 元素飘落速度
 snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机大小
 snowDiv.style.opacity = randomOpacity // 元素随机的不透明度
 snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内生成元素
 let div = snowDiv.cloneNode(true) // 复制元素
 document.body.append(div) // 添加复制后的元素
 animated(div,speed,visualHeight) // 传入创建的元素,飘落的速度以及页面可视化高度
},delay)

// 动态增加元素top值,当元素超过可视化区域,remove元素
function animated(div,speed,visualHeight) {
 div.timer = setInterval(() => {
 div.style.top = speed + div.offsetTop + 'px'
 if (Number(div.style.top.replace('px','')) > visualHeight - 80) {
 clearInterval(div.timer)
 document.body.removeChild(div)
 }
 },50)
}

到这里就基本完成此效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
js自定义select下拉框美化特效
May 12 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
javascript实现雪花飘落效果
Aug 19 #Javascript
js实现直播点击飘心效果
Aug 19 #Javascript
js实现鼠标点击飘爱心效果
Aug 19 #Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
7个JS基础知识总结
2014/03/05 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python实现元素等待代码实例
2019/11/11 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
护理专业毕业生自荐信范文
2014/01/05 职场文书
学生打架检讨书大全
2014/01/23 职场文书
文明寝室申报材料
2014/05/12 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书