H5+原生js 雪花特效

最新推荐文章于 2021-05-31 08:09:19 发布

Amin_won

最新推荐文章于 2021-05-31 08:09:19 发布

阅读量5.8k

点赞数 5

分类专栏： javascript 文章标签： html5 javascript 纯js 雪花特效

本文链接：https://blog.csdn.net/Amin_won/article/details/77371200

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本次实现的是屏幕实现雪花飘落特效。

2 效果图如下：

3 主要功能

实现雪花飘落。

。。。后续功能可以自己酌情添加

4实现方式

首先，我们需要一个容器，在这里只需要一个div就可以了，通过div的id就可以识别该容器并通过css

对其设置样式，代码如下概述
随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本次实现的是屏幕实现雪花飘落特效。
2 效果图如下：

3 主要功能
实现雪花飘落。
。。。后续功能可以自己酌情添加

4实现方式
首先，我们需要一个容器，在这里只需要一个div就可以了，通过div的id就可以识别该容器并通过css对其设置样式，代码如下：

<div class="container"  id="container" ></div>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .container{
            background-color: black;
            height: 100%;
            color: white;
            position: relative;
            overflow: hidden;
        }
    </style>

然后我们开始写js。首先开始时，我们先通过id获取外层容器div

，然后定义一个定时器，用于设置雪花下落的时间。

 div=document.getElementById("container");

接着就是在定时器里设置产生雪花，此时，将雪花图片放入容器中，而且我们会产生的雪花，因此需要定义一个数组用于承放雪花。并在此处对雪花设置样式：雪花的大小要设置随机大小、雪花产生的位置、结束的位置、下落时旋转的角度。代码如下：

setInterval(function(){
        var img=document.createElement("img");
        img.src="x.png";
        div.appendChild(img);
        array.push(img);
        img.style.position="absolute";
        img.style.top="-50px";
        img.style.webkitTransition="all 5s";

        //随机雪花大小
        var imgWidth=parseInt(Math.random()*10000000)%14+12;
        img.width=imgWidth;

        //随机雪花位置
 var left=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
        img.style.left=left+"px";
        //随机雪花结束位置
var leftDown=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
 
var topDown=screen.availHeight+parseInt(Math.random()*10000000)%(100);
        //随机雪花角度
        var deg=parseInt(Math.random()*10000000)%360+360;

        //自定义两个属性 用来存储随机的结束位置
        img.setAttribute("leftDown",leftDown);
        img.setAttribute("topDown",topDown);
        img.setAttribute("deg",deg);
    },50);

下面我们需要对雪花进行下落的动画特效开始封装方法了。创建方法downAnimation()，在方法中我们需要循环所有的雪花，改变每个雪花的落地位置。代码如下：

 for(var i=0;i<array.length;i++){
                var snow=array[i];
                //将处理完的删除
                array.splice(i,1);
                //校验是否已经设置完终点状态了
                if(parseInt(snow.style.top)>0){
                    continue;
                }

                //获取雪花与生俱来的终止状态
                var leftDown=snow.getAttribute("leftDown");
                var topDown=snow.getAttribute("topDown");
                var deg=snow.getAttribute("deg");

 				  //重新改变left和top
                snow.style.left=leftDown+"px";
                snow.style.top=topDown+"px";


 				 //重新改变雪花的角度
                snow.style.transform="rotate("+deg+"deg)";


                //当雪花下落到最低位置时，改变透明度
                snow.style.opacity=1;

最后我们将downAnimation()方法放置到新创建的定时器中，设置下落时间。代码如下：

setInterval(function(){
                setTimeout(function(){
                    downAnimation();
                },1);
            },50)

========================================================================================

程序完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .container{
            background-color: black;
            height: 100%;
            color: white;
            position: relative;
            overflow: hidden;
        }
    </style>
    
    <script>
        var div;
        var array=[];
        window.οnlοad=function(){
            //获取最外层容器
            div=document.getElementById("container");

            //开启定时器，产生雪花
            setInterval(function(){
                var img=document.createElement("img");
                img.src="x.png";
                div.appendChild(img);
                array.push(img);

                img.style.position="absolute";
                img.style.top="-50px";
                img.style.webkitTransition="all 5s";

                //随机雪花大小
                var imgWidth=parseInt(Math.random()*10000000)%14+12;
                img.width=imgWidth;

                //随机雪花位置
                var left=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
                img.style.left=left+"px";
                //随机雪花结束位置
                var leftDown=parseInt(Math.random()*10000000)%(screen.availWidth-imgWidth);
                var topDown=screen.availHeight+parseInt(Math.random()*10000000)%(100);
                //随机雪花角度
                var deg=parseInt(Math.random()*10000000)%360+360;

                //自定义两个属性 用来存储随机的结束位置
                img.setAttribute("leftDown",leftDown);
                img.setAttribute("topDown",topDown);
                img.setAttribute("deg",deg);
            },50);

            setInterval(function(){
                setTimeout(function(){
                    downAnimation();
                },1);
            },50)
        }


        /***
         * 雪花下落动画特效
         */
        function downAnimation(){

            //循环所有的雪花，改变每个雪花的落地位置
            for(var i=0;i<array.length;i++){
                var snow=array[i];
                //将处理完的删除
                array.splice(i,1);
                //校验是否已经设置完终点状态了
                if(parseInt(snow.style.top)>0){
                    continue;
                }

                //获取雪花与生俱来的终止状态
                var leftDown=snow.getAttribute("leftDown");
                var topDown=snow.getAttribute("topDown");
                var deg=snow.getAttribute("deg");

                //重新改变left和top
                snow.style.left=leftDown+"px";
                snow.style.top=topDown+"px";

                //重新改变雪花的角度
                snow.style.transform="rotate("+deg+"deg)";

                //改变透明度
                snow.style.opacity=1;


            }
          //  console.log(array.length+"=============");

        }

    </script>
</head>
<body>

<div class="container"  id="container" >
</div>

</body>
</html>