Jquery实现花瓣随机飘落(收藏自慕课网)
这个东西实际上慕课的艾伦大大先写的。然后别人推荐给我,偶一直收藏着,然后偶再推荐给偶的队友们,然后呢,这帮货就懒得都不肯去看。。。接着今天受伤在家就提出来了一点东西放在我博客顶上。。。然后艾伦的原文呢在这里。http://www.imooc.com/learn/453
在开始前,按照惯例吐槽一下最近的状况吧!昨天我骑车完成第4起车祸。然后打字只能靠6根指头,还有脑袋也被来了一下。。。然后目测除了外伤,头疼之外无大碍!吐槽点在与,程序员骑车的时候想的还是代码。然后peng。最后既然入了这行了,还是别玩车了。。。T_T
飘花效果的实现飘花的效果稍微复杂一点,有一定量的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() 删除这个对象
然后精简一下代码,因为我只要飘花效果
<divid='content'><!--飘花--><divid="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() {varsnowflakeURl =['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张花瓣的图片
varcontainer = $("#content");
visualWidth=container.width();
visualHeight=container.height();
//获取content的宽高
/////////飘雪花 /////////functionsnowflake() {//雪花容器var$flakeContainer = $('#snowflake');//随机六张图functiongetImagesName() {returnsnowflakeURl[[Math.floor(Math.random() * 6)]];
}//创建一个雪花元素functioncreateSnowBox() {varurl =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() {//运动的轨迹varstartPositionLeft = Math.random() * visualWidth - 100,
startOpacity= 1,
endPositionTop= visualHeight - 40,
endPositionLeft= startPositionLeft - 100 + Math.random() * 500,
duration= visualHeight * 10 + Math.random() * 5000;//随机透明度,不小于0.5varrandomStart =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,,,这个看标题么就知道了
jQuery Transit还有这个东西
http://github.com/rstacruz/jquery.transit
jquery对一些效果的扩展