jquery+css3实现网页背景花瓣随机飘落特效


Posted in Javascript onAugust 17, 2015

飘花效果的实现——效果图:

jquery+css3实现网页背景花瓣随机飘落特效

查看演示  源码下载

需求:

一个jquery,,,这个看标题么就知道了

jQuery Transit还有这个东西

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

jquery对一些效果的扩展

飘花的效果稍微复杂一点,有一定量的JavaScript代码,通过JS+CSS3的组合实现的。观察右边效果,可以大致分解飘花的实现

      飘花比人物的层级都高
      飘花数量非常多
      飘花会有一定的轨迹运动
      飘花带有渐变的效果
      飘花带有旋转的效果
      飘花落到地面会消失

这里采用的JS+CSS3的结合实现,CSS3实现旋转部分,首先从布局上来说,飘花是要比所有内部元素层级都要高,所以布局上是要与页面li平级才可以

实现原理:

通过定时器调用JS代码不断的动态创建雪花节点,随机选择一个图片作为其背景,赋予三个初始的样式属性top,left与opacity,通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的,主要涉及了一些细节的问题:例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程:

getImagesName随机6张图片,snowflakeURl定义一个地址的范围

createSnowBox创建雪花元素的节点,并且增加一个snowRoll的样式,也就是旋转的关键帧实现

定时器设置200ms不断的生成雪花对象,计算出3个属性的初始值,通过createSnowBox创建雪花元素,并且附上初始值,然后执行transition附上最终值,执行动画

动画结束后执行$(this).remove()  删除这个对象

然后精简一下代码,因为我只要飘花效果

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

获取外面#content的宽高

然后#snowflake里面做效果

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

然后么css么就是这样了,top:42px是因为我的导航高度

#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);
}
}

这里是给飘花加旋转之类的css3特技

<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 ? 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>

以上代码就是本文使用jquery实现网页背景花瓣随机飘落特效,希望大家喜欢。

Javascript 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
js中有关IE版本检测
Jan 04 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
Nginx上传文件全部缓存解决方案
Aug 17 #Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 #Javascript
You might like
PHP实现简单爬虫的方法
2015/07/29 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
Python 中的 else详解
2016/04/23 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python argparser的具体使用
2019/11/10 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
会计核算科岗位职责
2014/03/19 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
公司捐书倡议书
2015/04/27 职场文书