rainyday.js——超逼真全屏雨滴模拟插件

2013/10/07 前端开发, 素材分享原创 3 16,088

rainyday.js 是一个模拟雨滴落在玻璃上的JavaScript 库，基于HTML5 的canvas 。rainyday.js 做出来的雨滴效果非常逼真，在模糊背景的下的雨滴一点点爬满“玻璃”，配合着的背景音乐令人浮想联翩~~好了，有兴趣的往下看。

演示效果

夜景

演示地址

夏天

演示地址

森林

演示地址

项目地址

github 演示页面

使用方法·示例代码

<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>