β

逼真的全屏雨滴效果插件 – rainyday.js

设计达人 476 阅读

以前看过一些为网页添加下雪特效的JS代码,那时候已经觉得很不错了。今天和大家介绍一个很漂亮的雨滴效果jQuery插件,这个插件出来的雨滴非常逼真,如果使用在模糊背景的网页设计上,我想一定很赞,下面大家一起看看这个插件的演示。

灯红酒绿的夜景

雨滴会从一点点慢慢的滴出来,最后越来越多。

rainyday-js
演示地址1

夏天

从夏天这个DEMO上可以看到雨滴还有滑下去的水痕,很逼真。

rainyday-js-demo02
演示地址1

森林

rainyday-js-demo03
演示地址1

使用方法

这个插件的使用十分简单,直接把插件代码引用至页面头部即可。

<head>
...
<script src="http://www.shejidaren.com/"rainyday.js" type="text/javascript"></script>
<script type="text/javascript">
function demo() {
var engine = new RainyDay("'canvas','demo1', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.rain([
engine.preset(0, 2, 500)
]);
engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
</head>
下载地址:rainyday.js – github
演示页面:rainyday.js

Copyright ©2010-2013 ¦ RSS订阅 ¦ 新浪微博 ¦本文链接 ¦ 添加评论
作者:设计达人
爱设计,爱分享。
原文地址:逼真的全屏雨滴效果插件 – rainyday.js, 感谢原作者分享。

发表评论