H5+原生js 雪花特效

阿新 • • 發佈：2019-01-20

概述

隨著前端技術的發展，越來越多的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.onload=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>

H5+原生js 雪花特效

H5+原生js 雪花特效

h5原生js實現輪播圖

原生JS投票特效

js雪花特效_跟隨頁面滾動的下雪特效

原生js 放大鏡特效

小圖形下落,類似雪花飄落,原生js

原生JS實現的h5小遊戲-植物大戰僵屍

原生js實現返回頂部特效

原生js寫的雪花效果，使用畫布

原生js仿網易雲輪播特效

webview中巢狀html實現精準定位（百度地圖、高德地圖、騰訊地圖、H5原生定位）js對比

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

原生js可愛糖果數字時間特效

JS打字特效 JS 原生程式碼

有趣的Javascript：只需一個JS讓萬惡的IE5、IE6、IE7、IE8全都支援H5原生Canvas繪圖（有演示demo）

原生js實現拖動滑塊驗證

0510日重點：原生js修改豆瓣電影api 在angularjs裏運用出現的bug

原生JS的HTTP請求

基於原生JS+node.js+mysql打造的簡易前後端分離用戶登錄系統

使用原生JS封裝Tap事件，解決移動端300ms延遲

H5+原生js 雪花特效

相關推薦