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

6 10 月, 2013 发表于: HTML & CSS. 评论 (10)

Sponsor

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

灯红酒绿的夜景

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

演示地址1

夏天

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

演示地址1

森林

演示地址1

使用方法

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

<head>
...
<script src="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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接