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 - 回復
    2013 年 11 月 27 日 下午 10:12

    這個wordpress可以用嗎

  2. 策劃部-黃海深 - 回復
    2013 年 10 月 26 日 下午 2:25

    使得

  3. 于江水 - 回復
    2013 年 10 月 08 日 上午 9:20

    又看到了，很不錯

  4. 老趙_茶館 - 回復
    2013 年 10 月 08 日 上午 8:44

    這插件好像無法用本地圖片做效果，只能用imgur網站上的圖片。

    • Mr.Wang -
      2014 年 07 月 11 日 下午 2:12

      對的，我也遇到這個問題的。

  5. 陳先生不會唱歌 - 回復
    2013 年 10 月 07 日 下午 7:32
  6. 熠熠 - 回復
    2013 年 10 月 07 日 上午 9:56

    確實很牛逼啊。

  7. 世界電影博客│最原生態電影-追求原版電影分享-追求導演原版思想 - 回復
    2013 年 10 月 06 日 下午 10:12

    嗯，的確很perfect！I like it。

  8. 于江水 - 回復
    2013 年 10 月 06 日 下午 8:29

    Chrome 最新版好像沒看到效果

  9. 諸葛小覺 - 回復
    2013 年 10 月 06 日 下午 3:25

    真的好棒好棒呀~


{ 發表評論 }