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) // 插入到页面
接下来,让元素飘落
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)
}
到这里就基本完成此效果
JS实现炫酷雪花飘落效果相关推荐
- html js满屏飘雪特效,JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overf ...
- 【html+css+原生js实现炫酷照片展开效果-----女友相册的正确打开方式(详细)】
1.先看效果.有动画效果,截图效果不大明显.copy代码运行可以展示完整效果. 2.html页面 <!DOCTYPE html> <html><head><m ...
- 3D炫酷雪花背景的实现
3D炫酷雪花背景,并且雪的大小还会随时间变化.目前已经开源到码云上,源码下载地址:https://gitee.com/hj1991/snowFalling . 效果展示(微信截动态变化背景图,效果不太 ...
- [译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果 我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
- css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
- HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果
HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 完整代码下载地址:HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 index.html <!DOCTYPE html& ...
- Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
- iOS动画开发之五——炫酷的粒子效果
iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...
- JS实现逼真的雪花飘落特效
逼真的雪花飘落特效 效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...
最新文章
- 小米造车150天:烈火烹油第一枪
- Swin Transformer 升级,Swin V2:向更大容量、更高分辨率的更大模型迈进
- Java基础语法十二 泛型程序设计
- android没有输入焦点类控件的输入法调用,Android 手机下输入框获取焦点时, 输入法会挡住输入框...
- 06Matplotlib数据可视化--6.1绘图基础
- myeclipse jquerry ext 提示
- c语言输入一个字符 对其进行归类,计算机二级C语言改错题归类 - 图文
- 关于flink的时间处理不正确的现象复现原因分析
- Python各系统的安装
- 京东自动签到领京豆软件_京东618来了,合法又简单的自动领京豆的技能要get一下吗?...
- 网页数据实时更新的三种简单方法
- SURF特征提取(使用matlab自带函数)
- pytorch保存模型pth_详解Pytorch中的网络构造,模型save和load,.pth权重文件解析
- html 中 超链接的写法,网页超链接样式的CSS写法
- QT自定义Widget实现鼠标拖动窗口移动位置及鼠标拖拽窗口边缘窗口大小改变
- 总结 | Prompt在NER场景的应用
- 神都夜行录怎么在电脑上玩 神都夜行录安卓模拟器教程
- 专家详解华尔街区块链投资和其对比…
- react笔记-基础
- AI安全上路小记2-逻辑回归