JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果:
步骤:
页面基本样式,雪花旋转动画效果
body{ width:100vw; height:100vh; background-color:#000; overflow:hidden; user-select:none; -webkit-user-select:none; } .snowAnimation{ animation:snow5sinfinitelinear; -webkit-animation:snow5sinfinitelinear; } @keyframessnow{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } } @-webkit-keyframessnow{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }
创建雪花,添加样式
letsnowDiv=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值, functionanimated(div){ div.timer=setInterval(()=>{ div.style.top=10+div.offsetTop+'px' },50) }
接下来,给元素添加随机生成的初始化效果
letminSize=10//生成的最小元素 letmaxSize=50//生成的最大元素 letrandomOpacity=0.5+Math.random()*0.5//生成元素的不透明度 snowDiv.style.fontSize=minSize+Math.random()*maxSize+'px'//元素随机大小 snowDiv.style.opacity=randomOpacity//元素随机的不透明度
下一步,添加生成元素的随机位置,并且保持可视区域内活动
letvisualWidth=document.body.offsetWidth||document.documentElement.offsetWidth//页面可视化宽度 letvisualHeight=document.body.offsetHeight||document.documentElement.offsetHeight//页面可视化高度 letinitPosition=Math.random()*(visualWidth-80)//溢出会有滚动条,控制不会溢出,页面可视化宽度-(元素最大宽度+最大宽度/2) snowDiv.style.left=initPosition+'px'//随机在可视化区域位置内生成元素 animated(snowDiv,visualHeight)//传入创建的元素 //动态增加元素top值,当元素超过可视化区域,remove元素 functionanimated(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()
letminSize=10//生成的最小元素 letmaxSize=50//生成的最大元素 letdelay=100//生成元素的间隔时间 letsnowDiv=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' letvisualWidth=document.body.offsetWidth||document.documentElement.offsetWidth//页面可视化宽度 letvisualHeight=document.body.offsetHeight||document.documentElement.offsetHeight//页面可视化高度 setInterval(()=>{ letinitPosition=Math.random()*(visualWidth-80)//溢出会有滚动条,控制不会溢出,页面可视化宽度-(元素最大宽度+最大宽度/2) letrandomOpacity=0.5+Math.random()*0.5//生成元素的不透明度 letspeed=5+Math.random()*5//元素飘落速度 snowDiv.style.fontSize=minSize+Math.random()*maxSize+'px'//元素随机大小 snowDiv.style.opacity=randomOpacity//元素随机的不透明度 snowDiv.style.left=initPosition+'px'//随机在可视化区域位置内生成元素 letdiv=snowDiv.cloneNode(true)//复制元素 document.body.append(div)//添加复制后的元素 animated(div,speed,visualHeight)//传入创建的元素,飘落的速度以及页面可视化高度 },delay) //动态增加元素top值,当元素超过可视化区域,remove元素 functionanimated(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) }
到这里就基本完成此效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。