ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか?…
【JS】水の波紋のようなエフェクトで演出をする『jQuery Ripples』
画面上に水滴をたらしたようなエフェクト
ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。
公式ページ
基本ソース例
jQueryとjquery.ripples.jsを読み込んで、以下の設定を加えるだけで設置完了です。任意の#id
や.class
などの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面が波を打ちます。
※imgに直接class
やid
を指定したら動作しませんでした。以下のデモはスタイルシートでbackground-image
に画像を指定しています。
<style> div.ripples-1 { background-image: url('/blog/images/noimage-448.png'); width: 448px; height: 299px; } </style> <div class="div.ripples-1"></div> <script src="js/jquery-3.6.0.min.js"></script> http://js/jquery.ripples-min.js <script> $('div.ripples-1').ripples(); </script>
カスタマイズした例
以下は波紋の大きさや解像度などを指定した例です。
<style> div.ripples-2 { background-image: url('/blog/images/noimage-448.png'); width: 448px; height: 299px; } </style> <div class="div.ripples-2"></div> <script src="js/jquery-3.6.0.min.js"></script> http://js/jquery.ripples-min.js <script> $('div.ripples-2').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); </script>
パラメータ
名前 | タイプ | ディフォルト | 説明 |
---|---|---|---|
imageUrl | string | null | 背景画像の指定。背景として使用する画像のURL。存在しない場合、プラグインはbackground-image 代わりに計算されたCSSプロパティの値を使用しようとします。Data-URIも受け入れられます。 |
dropRadius | float | 20 | ドロップサイズ。キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ(ピクセル単位)。 |
perturbance | float | 0.03 | 屈折量。基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。 |
resolution | integer | 256 | 解像度。レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。 |
interactive | bool | true | マウスのクリックとマウスの動きが効果をトリガーするかどうか。 |
crossOrigin | string | “” | 影響を受ける画像に使用するcrossOrigin属性。詳細については、MDNを参照してください。 |
(参考ページ:https://github.com/sirxemic/jquery.ripples#options)
自動で実行する例
公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。
$('body').ripples("drop", x, y, radius, strength)
以下が具体的なソース例です。
なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。
<style> div.ripples-3 { background-image: url('/blog/images/noimage-448.png'); width: 448px; height: 299px; } </style> <div class="ripples-3"></div> <script src="js/jquery-3.6.0.min.js"></script> http://js/jquery.ripples-min.js <script> $(document).ready(function() { $('div.ripples-3').ripples({ resolution: 128, dropRadius: 10, perturbance: 0.04, interactive: false }); // Automatic drops setInterval(function() { var $el = $('div.ripples-3'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 20; var strength = 0.04 + Math.random() * 0.04; $el.ripples('drop', x, y, dropRadius, strength); }, 400); }); </script>
[小ネタ] VSCodeの拡張機能にQuokka.jsを入れたらとても便利だった
Javascriptを学習しているとき、なんらかのチュートリアルを行なっている時、プロトタイピングを行なっているときなど、 書いたコードの動きや値をちょっと確認したいときがあります。 そういった場合に非常に有用なQuok […]…
JavaScript | 同意するチェックと送信ボタンの無効化・有効化サンプル
JavaScriptでフォームにある利用規約に「同意する」チェックボックスのボタンとチェックしたら送信フォームを無効化から有効化に切り替える良くあるコンテンツのサンプルコードです。 同意するチェックと送信ボタンの無効化・ […]…
JavaScript | includes()で配列に指定の値があるかどうか確認する方法
JavaScriptでincludes()メゾットを使って配列内に指定した値があるかどうか確認する方法を紹介しています。 配列に指定の値があるかどうか確認 JavaScriptで配列の値を検索・調べる方法やメゾットはいく […]…
JavaScript | 秒を日・時間・分に変換して余り秒も取得する方法
JavaScriptで秒またはミリ秒を時間、分に変換する方法を紹介しています。 1日、1時間、1分がそれぞれ何秒かのメモはこちら。 秒 分 時間 1分 60秒 1分 ー 1時間 3600秒 60分 1時間 1日 86,4 […]
JavaScript | 除算(割り算)での余りを取得する方法
JavaScriptで除算(割り算)した際のの余り値を取得する方法を紹介しています。 また「割り切れるかどうか」の簡単な判別や割れた数と余りを取得するサンプルコードも置いてあります。 除算(割り算)での余りを取得する 除 […]…
JavaScript | for ofで配列のインデックス番号も取得する方法
JavaScriptのループ処理のひとつ、for of文で値と一緒に要素のインデックス番号も取得する方法を紹介しています。 for ofで配列のインデックス番号も取得する 配列をentries()メゾットにて指定する事で […]…
JavaScript | 配列にある要素の数を取得する方法
JavaScriptで配列にある要素の数を取得する方法を紹介しています。 配列の要素数を取得する lengthプロパティを使って配列内にある要素の長さ、数を取得します。 以下のサンプルコードでは3つの値がある配列なので、 […]…
JavaScript | 配列の値を連結して文字列に変換する方法
配列の値を連結して文字列に変換する方法を紹介しています。 配列の値を連結して文字列にする 配列の値が文字列や数値、または文字列や数値で構成された配列の場合、join()メゾットを使って指定した区切り文字で値を連結して文字 […]…