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高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
vue实现分页组件
Jun 16 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Python实现修改文件内容的方法分析
2018/03/25 Python
python实现windows下文件备份脚本
2018/05/27 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
上党课的心得体会
2014/09/02 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
导游词范文
2015/02/13 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
人民币符号
2022/02/17 杂记