js特效:树叶飘零 – 千丝海阁

首页 » Javascript » js特效:树叶飘零

js特效:树叶飘零

7581 26

前一阵子,根据Freshblog的配色,加了一段树叶飘零的js特效,代码来自国外网站,也忘了出自哪了。要是有人知道,可以告诉tiandi,tiandi会加上原文链接。
由于一直有合并js的习惯,所以尝试着回忆当时加这段特效时改过哪些东西,似乎就只是加了以下这段代码,现将代码分享,如果加上下面代码后没有效果,请留言告知,我再看看还需要加点什么东西。

/* 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);

[flatbtn type=fieldblue]2013.8.1追加更新css样式[/flatbtn]

#wrapper {
    margin: 50px auto;
	height: 600px;
    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: 100px;
     height: 100px;
     -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); }
}

请自行准备树叶的png文件放置于images目录下,最后如果不是在wordpress中调用则需要在需要显示效果的页面上加上以下代码:

<div id="wrapper"></div>
文章评分2次,平均分5.0

本文原始地址:https://www.tiandiyoyo.com/2013/06/js-leaves/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


26 Comments

  1. :

    具体复制下来 怎么改才行呀!我试了半天都没好呢!

  2. 博主你好,请问下这个效果只有放在wordpress里才能生效么,下下来本地用不了呢?

  3. 这个效果很有趣!还是喜欢博主那个在首页双击试试!有没有发布?

  4. 这个效果好炫呀!!

  5. 不错的js特效 谢谢

  6. 看到后面不懂了,用的什么STYLE啊。感觉CSS用的少,难道不能用一张图片调大小和角度来实现么?

  7. 番茄 :

    我有几片大树叶png,那效果一定不错!

  8. 南寻 :

    也可以改成樱花或者其它什么吧

  9. 番茄 :

    变宽屏了,视觉效果佳,开始还以为进入了论坛。。

  10. Vonvia :

    等到秋天用,嘿!

  11. 秋天的时候,可以使用,体验飘零的感觉~

  12. Winter :

    效果真漂亮 谢谢博主分享特效

  13. 果然是个不错的特效啊

载入分页评论...