raindrop.jsを利用して、水滴アニメーションでサイトのトップページを作成しました。
前準備として、jQueyとjQuery UIをCDNで利用する準備、raindrops.jsのダウンロードと利用準備の２つがあります。
1. jQueryのサイトから、jQueryとjQuery UIをCDNで利用します。右上のダウンロードボタンをクリック。
2. 検索ボックスに「CDN」と打ち込みます。
3. 検索で「CDN」が出てくるので、クリック。
4. 「jQuery CDN」をクリック。
5. 今回は、非圧縮版を使用します。
（ちなみに、圧縮版はコードが圧縮されており、余計なスペースやコメント、改行が削除されています。）
6. コピーして、htmlのbody直前に読み込みます。
7. jQuery UIも非圧縮版を使います。
8. こちらもコピーして、htmlのjQueyの下に貼り付けます。
Raindrops.jsの取得
9. raindrop.jsのトップページ少し下、「Github」をクリックします。
10. Github に飛びますので、「raindrops.js」をクリック。
11. 自身のcssファイルに、コピーして貼り付けます。
htmlファイルのjQuery UIの下に、このcssファイルを読み込みます。
cssにindex.htmlのスタイルを当てるstyle.cssを、jsにscript.jsを作成します。
上記の準備を済ませると、以下のファイル構成になります。
- index.html
- css ——- style.css
- js ——— script.js、raindrop.js
アニメーションの表示
index.htmlに波打つアニメーションの表示領域をdiv(id=”drop”)で作ります。index.html、style.css、script.jsファイルは以下の通りになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>水滴が落ちるアニメーション</title>
<link rel="stylesheet" href="./css/style.css" /> //自身のcss
</head>
<body>
<div id="drop"></div> //アニメーション表示領域
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> //jQuery
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js" integrity="sha256-9zljDKpE/mQxmaR4V2cGVaQ7arF3CcXxarvgr7Sj8Uc=" crossorigin="anonymous"></script> //jQuery UI
<script src="./js/raindrop.js"></script> //raindrops.jsファイルを指定
<script src="./js/script.js"></script> //自身のjsファイルを指定
</body>
</html>#drop{
height: 300px;
}jQuery('#drop').raindrops(
{color:'rgb(165, 210, 218)' //色指定
}
);script.jsファイルで、波の高さなど指定できます。
Raindrop.js 設定項目
| 設定項目 | デフォルト値 | 意味 |
|---|---|---|
color | #aaa | 水滴の色を指定します。CSSカラー値（例: #hex, rgb, rgba, hslなど）で指定可能。 |
canvasHeight | 500 | キャンバス（エフェクト領域）の高さ（ピクセル単位）。 |
canvasWidth | 500 | キャンバス（エフェクト領域）の幅（ピクセル単位）。 |
waveHeight | 100 | 波の高さを指定します。水滴が落ちたときにできる波紋の高さを制御します。 |
density | 0.02 | 波紋の密度を制御します。この値を増やすと波紋の細かさが増えますが、パフォーマンスに影響する可能性があります。 |
frequency | 1000 | 水滴が落ちる頻度（ミリ秒単位）。値を小さくすると水滴が落ちる間隔が短くなります。 |
rippleSpeed | 0.03 | 波紋の広がる速度を制御します。値を大きくすると波紋が早く広がります。 |
resolution | 256 | キャンバスの解像度を指定します。高解像度に設定するとより細かい波紋を描画できますが、パフォーマンスに影響します。 |
interactive | true | ユーザーの操作（例: マウスクリックやタッチ）による波紋を有効にするかどうかを設定します。 |
onClickAddDrop | true | クリックやタップ時に波紋を生成するかどうかを指定します。 |
opacity | 0.5 | 波紋や水面の透明度を指定します。0は完全透明、1は不透明です。 |
blur | 0 | 波紋のぼかし効果を設定します。値を大きくすると波紋がぼやけた見た目になります。 |
waveColor | #fff | 波紋（リップル）の色を指定します。水面の色と異なる色を指定すると、波紋の視認性が高まります。 |
dropRadius | 10 | 水滴の半径をピクセル単位で指定します。 |
perturbance | 0.03 | 波紋の変化度（乱れ）の強さを指定します。値を大きくすると波紋が不規則に見えるようになります。 |
表示の調整
表示は、以下のようになっています。
水エリアは両サイドに隙間があります。これは、bodyにmarginがあるからです。
また、以下のように、canvasエリアは1284pxまでしか伸びません。(画面サイズ1500pxにしてます）
どの画面サイズでも、端から端まで水エリアにするためには、style.cssを以下のように記述します。
body{
margin: 0;
}
#drop{
height: 300px;
}
canvas{
width: 100%;
}すると、端から端まで水エリアが・・・とおもったのですが、右端をよく見てみますと、以下のようになります。
斜めに隙間が生じます。そこで、div(#drop)にの幅を画面幅より大きくし、スクロールしないようにします。
html{
overflow: hidden;
}
body{
margin: 0;
overflow: hidden;
}
#drop{
height: 300px;
width: 105%;
}
canvas{
width: 100%;
}これで、端から端まで、水エリアが表示されました。
