jquery css3 realizes the random falling petals effect on the web page background

jquery css3 realizes the random falling petals effect on the web page background_javascript skills

WBOY

Release： 2016-05-16 15:44:48

Original

2655 people have browsed it

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

 <div id='content'>
 <!-- 飘花 -->
 <div id="snowflake"></div>
 </div>

Copy after login

Get the width and height of the outside #content

Then do the effect inside #snowflake

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

Copy after login

Then the 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);
}
}

Copy after login

Here are css3 special effects such as adding rotation to floating flowers

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 '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设置数组存储6张花瓣的图片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//获取content的宽高
 ///////
 //飘雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 随机六张图
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 创建一个雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 开始飘花
 setInterval(function() {
 // 运动的轨迹
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 随机透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 &#63; startOpacity : randomStart;
 // 创建一个雪花
 var $flake = createSnowBox();
 // 设计起点位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 开始执行动画
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //结束后删除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//执行函数

})
</script>

Copy after login

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.