Jquery + css3 implement random falling petals on the webpage background _ javascript skills

In the QQ space, you can customize some plug-ins and decoration spaces. Generally, you just copy the code to the space and paste it, which will achieve very beautiful results, and some will randomly fall some petals, so how can we implement this effect using code? The following small series will explain how jquery achieves the special effect of random falling of webpage background petals. If you need it, you can refer to the implementation of the floating flower effect --:

View demo source code download

Requirements:

A jquery, and you can see the title.

JQuery Transit.

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

Jquery extends some effects

The effect of floating flowers is a little more complex. There is a certain amount of JavaScript code, which is implemented through the combination of JS + CSS3. Observe the effect on the right side to roughly break down the implementation of floating flowers

Float is higher than the character hierarchy
A large number of floating flowers
Float will have a certain trajectory Movement
Float with gradient effect
Float with a rotating Effect
Falling to the ground will disappear

The JS + CSS3 combination is used here, And CSS3 achieves the rotation part. First of all, from the layout aspect, floating flowers are higher than all internal element levels, therefore, the layout must be at the same level as the page li.

Implementation principle:

By using the timer to call JS code, we constantly create snowflake nodes, randomly select an image as its background, and assign three initial style attributes top, left and opacity, execute the animation changes of these three attributes in an excessive way through the transition animation. The principle is actually very simple, mainly involving some details: Element creation, random image processing, Random Processing of left and opacity, calculation of final value, etc.

Execution Process:

GetImagesName: Six random images. The snowflakeURl defines the range of an address.

CreateSnowBox creates a node for the snowflake element and adds a snowRoll style, that is, the key frame Implementation of rotation.

The timer sets ms to continuously generate a snowflake object, calculate the initial values of the three attributes, create a snowflake element through createSnowBox, attach the initial values, then execute transition to attach the final value, and execute the animation.

Run $ (this). remove () to delete this object after the animation ends.

Then streamline the code, because I only need to float the results

Obtain the outside # content width and height

Then # implement the effect in the snowflake

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

Then, css is like this. top: 42px is because of my navigation height.

#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 is a css3 stunt for floating flowers and rotating them.