水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」

水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」

水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Raindropsは、横から見た水面が波打っているようなアニメーションを実装することができるjQueryプラグインです。

デモは以下ページにてご覧いただけます。

デモページを見る

スポンサードリンク

Raindropsの使い方

ステップ1. Raindropsのダウンロードと設置

まずはGitHubからファイルをダウンロードします。raindrops.jsをサーバーに設置して、jQuery本体・jQuery UIと一緒に読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="raindrops.js"></script>

RaindropsはjQueryだけでなく、jQuery UIも必要です。

ステップ2. HTMLのマークアップ

HTMLは非常にシンプルです。以下のようにアニメーションを表示させたい箇所にIDを付与します。

<div id="raindrops"></div>

この部分にcanvasが描画され、水面が表示されます。

ステップ3. Raindropsの実行

最後にRaindropsを実行するスクリプトを記述します。記述する場所は、</body>の直前でOKです。

<script>
$(function(){
$('#raindrops').raindrops({
color:'#0080FF', //水の色
waveLength:340, //波の長さ
frequency:3, //波紋の発生頻度
waveHeight:100, //波の高さ
density:0.02, //波紋の量
rippleSpeed:0.1, //波紋のスピード
canvasWidth:1000, //canvasの横幅
canvasHeight:120, //canvasの高さ
rightPadding:20, //canvasの余白調整
position:'absolute', //positionの値
positionBottom:0, //positionのbottomの値
positionLeft:0 //positionのleftの値
});
});
</script>

「#raindrops」でHTMLで付与したIDを指定しましょう。オプションは不要なものは削除してください。

あとがき

とてもユニークなアニメーションを実装できますね。一風変わったアニメーションを実装したい時は、ぜひ導入をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。