jquery petals randomly falling (collected from Mu net)

This thing actually was written by Alan in class. Then others recommend to me, I always keep the collection, and then I recommend to my teammates, and then, this help the goods will not be bothered to see ... And then today I got hurt at home and put something on top of my blog ...

and then Alan's original is here. http://www.imooc.com/learn/453

Before you begin, spit out the latest situation as usual. I rode the 4th car accident yesterday. Then typing can only rely on 6 fingers, and the head is also a bit ... And then visually, apart from the trauma, the headache is no big deal! Spit the Groove point in the With, the programmer to ride the time to think or code. Then Peng. Finally, since the line into this, or do not play the car ... t_t

Realization of floating flower effect

The effect of the flower is slightly more complex, there is a certain amount of JavaScript code, through the combination of JS+CSS3 implementation. Observe the right effect, can roughly decompose the realization of the fluttering flower

• The flowers are higher than the characters ' levels.
• There's a lot of floating flowers.
• The floating flower has a certain trajectory movement
• Floating flowers with a gradient effect
• Floating flowers with a rotating effect
• The flowers fall to the ground and disappear.

The combination of the JS+CSS3 used here, CSS3 realize the rotation of the part, first of all, from the layout, the flower is more than all the internal element level, so the layout is to be with the page Li peer can

Implementation principle:

Through the timer call JS code constantly dynamically create snowflake nodes, randomly select a picture as its background, give three initial style attributes Top,left and opacity, through the transition animation over the way to perform the animation of these 3 properties changes. The whole principle is also very simple, mainly related to some of the details of the problem: such as the creation of elements, the random picture, the start of left and opacity random processing, the final value of the calculation and so on

Process of execution:

• Getimagesname random 6 Images, Snowflakeurl defines the range of an address
• Createsnowbox creates a node for the Snowflake element and adds a snowroll style, which is the rotation keyframe implementation
• Timer set 200ms continuously generate snowflake object, calculate the initial value of 3 properties, create snowflake element by Createsnowbox, and attach initial value, then execute transition attach final value, perform animation
• Executes $ (this) after the animation finishes. Remove () Delete this object

 And then I'll simplify the code, because I just have to float.

    <id= ' content '>        <!-- -        <ID= "Snowflake"></Div  >    </div>

Get the width of the outside #content

And then #Snowflake inside to do the effect

{ width: 100%; height: 100%; top: 42px; overflow: hidden; position: absolute; }

And what about CSS? top:42px is because of my navigation altitude

#snowflake{width:100%;Height:100%;position:Absolute;Top:0; Left:0;Overflow:Hidden; }. Snowroll{position:Absolute;Opacity:0;-webkit-animation-name:Mysnow;-webkit-animation-duration:20s;-moz-animation-name:Mysnow;-moz-animation-duration:20s;Height:80px; }@-webkit-keyframes Mysnow{0% {Bottom:100%;}50%{-webkit-transform:Rotate (1080deg);}100%{-webkit-transform:Rotate (0deg) translate3d (50px, 50px, 50px);}} @-moz-keyframes Mysnow{0% {Bottom:100%;}50%{-moz-transform:Rotate (1080deg);}100%{-moz-transform:Rotate (0deg) translate3d (50px, 50px, 50px);}}

Here's a CSS3 stunt like a floating flower and a spin.

<script type= "Text/javascript" >$(function() {    varSnowflakeurl = [        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png ',        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png ',        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png ',        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png ',        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png ',        ' Http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png '] //js set the array to store 6 petals pictures
　　     varContainer = $ ("#content"); Visualwidth=container.width (); Visualheight=Container.height ();
　　Get the content's width and height

　　    ///////    //Snow flower//    ///////    functionSnowflake () {//Snowflake Container        var$flakeContainer = $ (' #snowflake '); //six random images        functionGetimagesname () {returnSnowflakeurl[[math.floor (Math.random () * 6)]]; }        //Create a snowflake element        functionCreatesnowbox () {varURL =Getimagesname (); return$ (' <div class= ' Snowbox "/> '). css ({' Width ': 41,                ' Height ': 41,                ' Position ': ' absolute ',                ' Backgroundsize ': ' Cover ',                ' ZIndex ': 100000,                ' Top ': ' -41px ',                ' backgroundimage ': ' url (' + URL + ') '}). addclass (' Snowroll '); }        //Start floating flowersSetInterval (function() {            //the trajectory of the motion            varStartpositionleft = Math.random () * visualWidth-100, Startopacity= 1, Endpositiontop= visualHeight-40, Endpositionleft= startPositionLeft-100 + math.random () * 500, Duration= Visualheight * + math.random () * 5000; //random transparency, not less than 0.5            varRandomstart =Math.random (); Randomstart= Randomstart < 0.5?Startopacity:randomstart; //Create a snowflake            var$flake =Createsnowbox (); //Design Start Position$flake. css ({left:startpositionleft, opacity:randomstart}); //Add to Container$flakeContainer. Append ($flake); //start the animation execution$flake. Transition ({top:endpositiontop, left:endpositionleft, Opacity:0.7}, Duration,' Ease-out ',function() {                $( This). Remove ()//Delete after end            }); }, 200); } Snowflake ()
　　　//Execute function })</script>

Okay, the code is finished ... Finally share a Allen blog to finish the code ... Then the single dog has no place to date. That's a joke. Recently there is a game + TV series called Flowers thousand bones of things ... As a cartoon house every day love odd art ads are this ghost. Then there was an ad "the blood of the thousand bones can wither the flowers."At this time the man of God said, then,after that night, the brother is now well, whether the parts are missing ...

And then finally send out the library you need to use.

A jquery,,, this look at the title will know

JQuery transit and this thing.

Http://github.com/rstacruz/jquery.transit

The extension of jquery to some effects

jquery petals randomly falling (collected from Mu net)