JS實現(xiàn)炫酷雪花飄落效果

更新時間：2020年08月19日 11:17:38 作者：前端小小白zyw

這篇文章主要為大家詳細介紹了JS實現(xiàn)炫酷雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用js實現(xiàn)漂亮的雪花飄過效果：

步驟：

頁面基本樣式，雪花旋轉動畫效果

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

創(chuàng)建雪花，添加樣式

let snowDiv = document.createElement('div') // 創(chuàng)建div
snowDiv.innerHTML = '❉' // 添加❉內(nèi)容
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) // 傳入創(chuàng)建的元素

// 動態(tài)增加元素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 // 元素隨機的不透明度

下一步，添加生成元素的隨機位置，并且保持可視區(qū)域內(nèi)活動

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' // 隨機在可視化區(qū)域位置內(nèi)生成元素
animated(snowDiv,visualHeight) // 傳入創(chuàng)建的元素

// 動態(tài)增加元素top值，當元素超過可視化區(qū)域，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)
}

基本完成：生成一個隨機大小/不透明度的元素，并且在可視化區(qū)域內(nèi)飄落

下一步，復制生成多個元素：cloneNode()

let minSize = 10 // 生成的最小元素
let maxSize = 50 // 生成的最大元素
let delay = 100 // 生成元素的間隔時間
let snowDiv = document.createElement('div') // 創(chuàng)建div
snowDiv.innerHTML = '❉' // 添加❉內(nèi)容
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' // 隨機在可視化區(qū)域位置內(nèi)生成元素
 let div = snowDiv.cloneNode(true) // 復制元素
 document.body.append(div) // 添加復制后的元素
 animated(div,speed,visualHeight) // 傳入創(chuàng)建的元素，飄落的速度以及頁面可視化高度
},delay)

// 動態(tài)增加元素top值，當元素超過可視化區(qū)域，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)
}

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: