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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
纯javascript版日历控件
Nov 24 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
js字符编码函数区别分析
2008/06/05 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
C#面试问题
2016/07/29 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
行政专员工作职责
2013/12/22 职场文书
中国入世承诺
2014/04/01 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
保证书范文大全
2014/04/28 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
工程部主管岗位职责
2015/02/12 职场文书
环保宣传语大全
2015/07/13 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android