2014年12月19日

画像に雨を降らせる rainyday.js このエントリーをはてなブックマークに追加

maroslaw/rainyday.js - GitHubを使うとこんな感じで好きな画像に雨を降らせることができるのだ。

デモ1 / デモ2 / デモ3 / デモ4 / デモ5

各パラメータの指定はこんな感じのようである。
How to use:

var engine = new RainyDay({
image: element, // Image element
// This value is required
parentElement: someDiv, // Element to be used as a parent for the canvas
// If not provided assuming the 'body' element
crop: [0, 0, 50, 60], // Coordinates if only a part of the image should be used
// If not provided entire image will be used
blur: 10, // Defines blur due to rain effect
// Assuming 10 if not provided
// Use 0 value to disable the blur
opacity: 1 // Opacity of rain drops
// Assuming 1 if not provided
});
engine.rain(
[
[1, 0, 20], // add 20 drops of size 1...
[3, 3, 1] // ... and 1 drop of size from 3 - 6 ...
],
100); // ... every 100ms

いろいろカスタマイズできそうなのでちょっと遊べそうだねぇ。

maroslaw/rainyday.js - GitHub


posted by りょーち | Comment(0) | TrackBack(0) | Web周辺技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。