以下是 jQuery下雪动画插件fallingsnow js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery下雪动画插件fallingsnow</title>
<link rel="stylesheet" href="css/jquery.fallingsnow.css">
<link rel="stylesheet" href="css/snow-globe.css">
</head>
<body>
<section>
<div class="globe-wrap">
<div class="globe"></div>
<div id="snowman"></div>
<div id="snow"></div>
</div>
</section>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.fallingsnow.min.js"></script>
<script>
$( "#snow" ).fallingSnow();
</script>
</body>
</html>JS代码(jquery.fallingsnow.min.js):
!function(t){
t.fn.fallingSnow=function(a){
var f,s,d,h,l,o=t.extend({
stopOnClick:!0,stopElement:t("#snow"),speedAdjust:2,thicknessAdjust:1,drift:100,opacity:!0}
,a),n=t(this),r=t(window).width(),e=t(window).height(),i=parseInt(r/14);
i=10*Math.round(i/10)/2;
for(var p=Math.floor(Math.random()*(i-9))+(i+11),M=0;
p>M;
M++)f=Math.floor(11*Math.random())*o.thicknessAdjust,s=Math.floor(101*Math.random()),d=Math.floor(101*Math.random()),l=1==o.opacity?Math.floor(3*Math.random()):0,5>f?h=Math.floor(3001*Math.random())+2100:f>5&&9>f?h=Math.floor(2099*Math.random())+1700:f>8&&(h=Math.floor(1699*Math.random())+1e3),h*=o.speedAdjust,n.append('<b class="op'+l+'" style="width:'+f+"px;
height:"+f+"px;
left:"+s+"%;
top:"+d+'%;
" data-speed="'+h+'"></b>');
n.find("b").each(function(){
function l(){
a.animate({
top:0,left:r+Math.floor(Math.random()*(h-d+1))+d}
,0).animate({
top:"100%",left:r+Math.floor(Math.random()*(h-d+1))+d}
,f,"linear",function(){
l()}
)}
var a=t(this),n=parseInt(a.css("top")),r=parseInt(a.css("left")),f=parseInt(a.attr("data-speed")),s=f-n/e*f,d=-1*o.drift,h=o.drift;
a.animate({
top:e}
,s,"linear",function(){
l()}
)}
),o.stopElement.click(function(){
1==o.stopOnClick&&n.find("b").stop(!0)}
)}
}
(jQuery);
CSS代码(snow-globe.css):
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{margin:0;padding:0;color:#fff;background:#0c0c38;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBjMGMzOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTE5NzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#0c0c38 0%,#191970 100%);background:-webkit-linear-gradient(top,#0c0c38 0%,#191970 100%);background:linear-gradient(to bottom,#0c0c38 0%,#191970 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c0c38',endColorstr='#191970',GradientType=0 );}
a{color:cyan;-webkit-transition:0.3s all;-o-transition:0.3s all;transition:0.3s all;}
a:hover{color:#fff;text-decoration:none;}
.globe-wrap{width:600px;height:753px;position:relative;margin:20px auto 0;}
.globe{width:600px;height:753px;position:absolute;background:url(../img/empty-snowglobe.png) no-repeat 0 0;}
#snowman{position:absolute;width:135px;height:250px;background:url(../img/snowman.png) no-repeat 0 0;left:210px;top:240px;}
.window-wrap{width:477px;height:605px;margin:0 auto;position:relative;}
.window-wrap .window{position:absolute;width:100%;height:100%;background:url(../img/window.png) 0 0 no-repeat;}
#snow{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;position:absolute;width:580px;height:560px;overflow:hidden;left:7px;top:5px;z-index:1;}
h1,section{margin:0 auto;max-width:600px;}
CSS代码(snow-window.css):
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{margin:0;padding:0;color:#fff;background:url(../img/damast.jpg);font-family:enriqueta,sans-serif;}
pre{font-family:pt-mono,monospace;}
a{color:cyan;-webkit-transition:0.3s all;-o-transition:0.3s all;transition:0.3s all;}
a:hover{color:#fff;text-decoration:none;}
.window-wrap{width:477px;height:605px;margin:20px auto;position:relative;}
.window-wrap .window{position:absolute;width:100%;height:100%;background:url(../img/window.png) 0 0 no-repeat;}
.window-wrap:after{background:rgba(0,0,0,0.5) none repeat scroll 0 0;bottom:-50px;-webkit-box-shadow:0 0 60px rgba(0,0,0,0.5);box-shadow:0 0 60px rgba(0,0,0,0.5);content:"";display:block;height:100px;position:absolute;width:90%;z-index:-1;-webkit-transform:skewX(-20deg);-ms-transform:skewX(-20deg);-o-transform:skewX(-20deg);transform:skewX(-20deg);}
#snow{width:328px;height:446px;left:83px;top:57px;background:#0E0E3F;}
h1,section{margin:20px auto;max-width:800px;}
section.copy{padding:20px;background:rgba(42,10,11,0.7);-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
a.download{color:#fff;text-decoration:none;padding:10px 20px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;-webkit-transition:0.2s all;-o-transition:0.2s all;transition:0.2s all;background:rgba(0,0,0,0.7);}
a.download:hover{background:rgba(0,0,0,1);}
#explain{background:#591F1E url("http://rayhyde.nl/playground/img/playground.png") no-repeat scroll 98% bottom / 150px auto;border-radius:10px;color:#fff;padding:20px;min-height:160px;width:100%;}
#explain > p{line-height:150%;}
#explain > p.extra-padding{padding-right:160px;}
#explain h2{margin:0 0 10px;}
#explain a{color:#ffffff;-webkit-transition:0.3s all;-o-transition:0.3s all;transition:0.3s all;border-bottom:solid 1px #ffffff;text-decoration:none;}
#explain a:hover{border-color:transparent;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
