【おすすめ】水たまり風のjQueryプラグイン使い方
いやー最近猛暑日が続きますね、すっかり夏ですね！
と言うことで、夏になると夏っぽいサイトを作りたくなることがありますよね！⇦僕だけ
そこで面白いjQueryのプラグインを見つけました。
[jquery.ripples.js]水たまり風のjQuery!!
波紋のようにも見えますよね！波紋カッターァァァ
すいません、ふざけすぎました（汗）
冗談はさておき、何と言ってもこのエフェクト触るのがすごく楽しい！！
見ていても涼しげが感じられますしね。
[jquery.ripples.js] 使い方
jquery.ripples.js というプラグインです。
ダウンロードしたファイル内の「jquery.ripples.js」と「jquery.js」を読み込ませます。
HTML
⑴<head>内に以下コード記入
|
1 |
<link rel="stylesheet" href="hoge.css"> |
<link rel=“stylesheet” href=“hoge.css”>
⑵</body>前に以下コード記入
|
1 2 3 |
<script src="jquery.js"></script> <script src="jquery.ripples.js"></script> <script src="hoge.js"></script> |
⑶<body>内に以下コード記入
|
1 2 3 4 5 |
<div class="stage"> <div class="hoge"></div> </div> |
CSS (例なので好きに変更可能です)
|
1 2 3 4 5 |
.hoge{ width:1000px; height:500px; background: url(‘画像のパスを指定してください’) #fff; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ let $hoge = $(‘.hoge’); $hoge.ripples({ resolution: 400, dropRadius: 25, perturbance: 0.05 }); }); |
まとめ
いかがでしたでしょうか？とっても簡単ですよね！
こんなに素敵なエフェクトなのに簡単すぎる！ありがたいです
皆さんもこの機会にjquery.ripples.jを使って素敵な作品を作ってみてはいかがでしょうか！
以上jQueryのプラグインについての記事でした。
ご覧いただきありがとうございます。
