CSS图书馆 » HTML & CSS » 逼真的全屏雨滴效果插件 – rainyday.js

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

发表于: HTML & CSS. 评论 (10)
Sponsor

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

灯红酒绿的夜景

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

rainyday-js
演示地址1

夏天

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

rainyday-js-demo02
演示地址1

森林

rainyday-js-demo03
演示地址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设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论10 Responses to “逼真的全屏雨滴效果插件 – rainyday.js”

  1. LEO - 回复

    这个wordpress可以用吗

  2. 策划部-黄海深 - 回复

    使得

  3. 于江水 - 回复

    又看到了,很不错

  4. 老赵_茶馆 - 回复

    这插件好像无法用本地图片做效果,只能用imgur网站上的图片。

    • Mr.Wang -

      对的,我也遇到这个问题的。

  5. 陈先生不会唱歌 - 回复
  6. 熠熠 - 回复

    确实很牛逼啊。

  7. 世界电影博客│最原生态电影-追求原版电影分享-追求导演原版思想 - 回复

    嗯,的确很perfect!I like it。

  8. 于江水 - 回复

    Chrome 最新版好像没看到效果

  9. 诸葛小觉 - 回复

    真的好棒好棒呀~


{ 发表评论 }