温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS如何实现炫酷雪花飘落效果的方法

发布时间:2020-08-20 09:39:30 来源:亿速云 阅读:258 作者:小新 栏目:开发技术

JS如何实现炫酷雪花飘落效果的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

用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)
}

感谢各位的阅读!看完上述内容,你们对JS如何实现炫酷雪花飘落效果的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI