JavaScript 落叶缤纷

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript 落叶缤纷</title>
    <style>
    #wrapper {margin:50px auto;height:600px;position: relative;overflow:hidden;border:4px solid #5c090a}
    #wrapper #leafid { position:absolute;width:100px;height:100px;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-direction:normal,normal;-webkit-animation-timing-function:linear,ease-in}
    #wrapper>div>img {position:absolute;width:50px;height:50px;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:50% -100%}
    @-webkit-keyframes fade {
        0%{opacity:1}
        95%{opacity:1}
        100%{opacity:0}
    }
    @-webkit-keyframes drop {
        0%{-webkit-transform:translate(0px,-50px)}
        100%{-webkit-transform:translate(0px,650px)}
    }
    @-webkit-keyframes clockwiseSpin {
        0%{-webkit-transform:rotate(-50deg)}
        100%{-webkit-transform:rotate(50deg)}
    }
    @-webkit-keyframes counterclockwiseSpinAndFlip {
        0%{-webkit-transform:scale(-1,1) rotate(50deg)}
        100%{-webkit-transform:scale(-1,1) rotate(-50deg)}
    }
    </style>
</head>
<body>
    
    <div id="wrapper"></div>
    
    
    <script>
    /* Define the number of leaves to be used in the animation */
    const NUMBER_OF_LEAVES = 5;

    /* 
        Called when the "Falling Leaves" page is completely loaded.
    */
    function initleaves()
    {
        /* Get a reference to the element that will contain the leaves */
        var container = document.getElementById('wrapper');
        /* Fill the empty container with new leaves */
        for (var i = 0; i < NUMBER_OF_LEAVES; i++) 
        {
            container.appendChild(createALeaf());
        }
    }


    /*
        Receives the lowest and highest values of a range and
        returns a random integer that falls within that range.
    */
    function randomInteger(low, high)
    {
        return low + Math.floor(Math.random() * (high - low));
    }


    /*
       Receives the lowest and highest values of a range and
       returns a random float that falls within that range.
    */
    function randomFloat(low, high)
    {
        return low + Math.random() * (high - low);
    }


    /*
        Receives a number and returns its CSS pixel value.
    */
    function pixelValue(value)
    {
        return value + 'px';
    }


    /*
        Returns a duration value for the falling animation.
    */

    function durationValue(value)
    {
        return value + 's';
    }


    /*
        Uses an img element to create each leaf. "Leaves.css" implements two spin 
        animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
        function determines which of these spin animations should be applied to each leaf.
    
    */
    function createALeaf()
    {
        /* Start by creating a wrapper div, and an empty img element */
        var leafDiv = document.createElement('div');
        var image = document.createElement('img');
    
        /* Randomly choose a leaf image and assign it to the newly created element */
        image.src = 'http://www.tiandiyoyo.com/wp-content/themes/freshblog/images/leave' + randomInteger(1, 5) + '.png';

        leafDiv.id = "leafid";
        leafDiv.style.top = "-70px";

        /* Position the leaf at a random location along the screen */
        leafDiv.style.left = pixelValue(randomInteger(220, 1100));
    
        /* Randomly choose a spin animation */
        var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
    
        /* Set the -webkit-animation-name property with these values */
        leafDiv.style.webkitAnimationName = 'fade, drop';
        image.style.webkitAnimationName = spinAnimationName;

        /* Set the -moz-animation-name property with these values */
        leafDiv.style.animationName = 'fade, drop';
        image.style.animationName = spinAnimationName;
    
        /* Figure out a random duration for the fade and drop animations */
        var fadeAndDropDuration = durationValue(randomFloat(6, 11));
    
        /* Figure out another random duration for the spin animation */
        var spinDuration = durationValue(randomFloat(4, 8));
        /* Set the -webkit-animation-duration property with these values */
        leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

        /* Set the -moz-animation-duration property with these values */
        leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

        var leafDelay = durationValue(randomFloat(0, 5));
        leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
        leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;

        image.style.webkitAnimationDuration = spinDuration;
        image.style.animationDuration = spinDuration;

        // add the <img> to the <div>
        leafDiv.appendChild(image);

        /* Return this img element so it can be added to the document */
        return leafDiv;
    }

    /* Calls the init function when the "Falling Leaves" page is full loaded */
    window.addEventListener('load', initleaves, false);
    </script>
</body>
</html>

 

posted @ 2014-09-03 20:41  赵小磊  阅读(369)  评论(0)    收藏  举报
回到头部