Realization of the floating flower effect - renderings:
View demo Source code download
Requirements:
A jquery,,, you can know this just by looking at the title
jQuery Transit also has this thing
http://github.com/rstacruz/jquery.transit
jquery extension for some effects
The effect of floating flowers is a little more complicated. It requires a certain amount of JavaScript code and is achieved through a combination of JS and CSS3. Observing the effect on the right, you can roughly break down the implementation of floating flowers
Piaohua is higher than the character level
There are a lot of floating flowers
The floating flowers will move in a certain trajectory
The floating flowers have a gradient effect
The floating flowers have a rotating effect
Flowers will disappear when they fall to the ground
The combination of JS and CSS3 used here implements the rotation part. First of all, from the layout point of view, the floating flowers are higher than all internal elements, so the layout must be at the same level as the page li
Implementation principle:
Call JS code through timer to continuously and dynamically create snowflake nodes, randomly select a picture as its background, assign three initial style attributes top, left and opacity, and execute the animation of these three attributes through transition animation. change. The whole principle is actually very simple, mainly involving some details: such as the creation of elements, randomization of images, random processing of left and opacity at the beginning, calculation of final values, etc.
Execution process:
getImagesName randomly selects 6 pictures, snowflakeURl defines a range of addresses
createSnowBox creates the node of the snowflake element and adds a snowRoll style, which is the keyframe implementation of rotation
Set the timer for 200ms to continuously generate snowflake objects, calculate the initial values of the three attributes, create the snowflake element through createSnowBox, and attach the initial value, then execute the transition to attach the final value, and execute the animation
After the animation ends, execute $(this).remove() to delete this object
Then simplify the code, because I only want the floating flower effect
1 2 3 4 |
|
Get the width and height of the outside #content
Then do the effect inside #snowflake
1 2 |
|
Then the css is like this, top: 42px is because of my navigation height
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Here are css3 special effects such as adding rotation to floating flowers
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
|
The above code is how this article uses jquery to achieve the random falling petals effect on the web page background. I hope you like it.