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 自动转到命名锚记
Jan 10 Javascript
javascript定义函数的方法
Dec 06 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
angular.js分页代码的实例
Jul 27 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
js实现简单模态框实例
2018/11/16 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
python删除过期文件的方法
2015/05/29 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
django rest framework 过滤时间操作
2020/07/12 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
什么是就业协议书
2014/04/17 职场文书
2014年行政部工作总结
2014/11/19 职场文书
家长高考寄语
2015/02/27 职场文书
步步惊心观后感
2015/06/12 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Python编写nmap扫描工具
2021/07/21 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers