JQUERY+CSS3 to implement _javascript tips for random falling petals of web page background

The realization of fluttering effect--effect chart:

View Demo Source Download

Demand:

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

JQuery transit and this thing.

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

The extension of jquery to some effects

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

The drift is higher than the level of the characters
The number of floats is very large
Floating flowers have a certain track movement
Fluttering flowers with a gradient effect
Fluttering flowers with the effect of rotation
Flowers fall to the ground will disappear

Here the use of the combination of JS+CSS3 implementation, CSS3 realize the rotation of the part, first of all, from the layout, the drift is higher 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 node, randomly select a picture as its background, give three initial style attributes Top,left and opacity, through transition animation over the way to perform the animation of these 3 properties changes. The whole principle is also very simple, mainly involved in a number of details of the problem: such as the creation of elements, pictures of random, start left and opacity random processing, the calculation of the final value and so on

Process to execute:

Getimagesname Random 6 pictures, Snowflakeurl Define a range of addresses

Createsnowbox creates the nodes of the snowflake element and adds a snowroll style, which is the key frame implementation of the rotation

Timer set 200ms constantly generate snowflake objects, calculate the initial value of 3 properties, create snowflake elements through Createsnowbox, and attach the initial value, then execute transition attached final value, perform animation

Execute $ (this) after animation ends. Remove () Delete this object

And then streamline the code, because I just want to float the effect

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

Get the width and height of the #content outside

And then #snowflake inside to do the effect

#content {width:100%; height:100%; top:42px
; Overflow:hidden; Position:absolute; }

And then, CSS, that's it, top:42px 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);
}

This is a CSS3 stunt that floats and spins.

<script type= "Text/javascript" > $ (function () {var snowflakeurl = [' Http://images.cnblogs.com/cnblogs_com/LoveO Rhate/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 array to store 6 petals of the picture var container = $ ("#content");
 Visualwidth = Container.width ();
　　Visualheight = Container.height ();
　　　　　　
 Gets the content of the width high/////////snow flower/////////function snowflake () {//snowflake container var $flakeContainer = $ (' #snowflake ');
 Random six map function Getimagesname () {return Snowflakeurl[[math.floor (Math.random () * 6)]];
 //Create a snowflake element function Createsnowbox () {var url = getimagesname (); return $ (' <div class= "Snowbox"/> '). css ({' Width ': ", ' Height ':", ' position ': ' absolute', ' backgroundsize ': ' Cover ', ' ZIndex ': 100000, ' top ': ' -41px ', ' backgroundimage ': ' url (' + URL + ') '}. addclass (' SN
 Owroll ');  //Start fluttering setinterval (function () {//motion trajectory var startpositionleft = math.random () * visualWidth-100, startopacity = 1, endpositiontop = visualHeight-40, Endpositionleft = startPositionLeft-100 + math.random () *, duration = Vis

 Ualheight * + math.random () * 5000;
 Random transparency, not less than 0.5 var Randomstart = 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 $flake. Transition ({top:endpositiontop, left:endpositionleft, opacity:0.7}, Duration, ' ease-out ', funct
 
 Ion () {$ (this). Remove ()//End Delete});
 }, 200); } snowflake ()//Executive function}) </script>

The above code is the use of jquery to implement the Web page background petals random falling effects, I hope you like.