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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
13个PHP函数超实用
Oct 21 Javascript
原生js简单实现放大镜特效
May 16 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 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
thinkphp的c方法使用示例
2014/02/24 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python实现反转部分单向链表
2018/09/27 Python
python的turtle库使用详解
2019/05/10 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
优质的学校老师推荐信
2013/10/28 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
销售冠军获奖感言
2014/02/03 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
共青团员自我评价范文
2014/09/14 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
vue实现简易音乐播放器
2022/08/14 Vue.js