エフェクト on qwerty.work

【JS】水の波紋のようなエフェクトで演出をする『jQuery Ripples』

Thu, 02 Dec 2021 22:57:55 +0900

div.ripples-1, div.ripples-2, div.ripples-3 { background-image: url(’/blog/images/noimage-448.png’); width: 448px; height: 299px; }

画面上に水滴をたらしたようなエフェクト

ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。

公式ページ

http://sirxemic.github.io/jquery.ripples/ http://sirxemic.github.io/jquery.ripples/

基本ソース例

jQueryとjquery.ripples.jsを読み込んで、以下の設定を加えるだけで設置完了です。任意の#idや.classなどの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面があるかのように波を打ちます。

※imgに直接classやidを指定したら動作しませんでした。以下のデモはスタイルシートでbackground-imageに画像を指定しています。

↓画像にマウスカーソルを載せてみてください。

$(‘div.ripples-1’).ripples();

<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>
<script src="js/jquery.ripples-min.js"></script>
<script> 
  $('div.ripples-1').ripples();
</script>

カスタマイズした例

以下は波紋の大きさや解像度などを指定した例です。

↓画像にマウスカーソルを載せてみてください。

$(‘div.ripples-2’).ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, });

<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>
<script src="js/jquery.ripples-min.js"></script>
<script> 
$('div.ripples-2').ripples({
   resolution: 512,   //解像度
   dropRadius: 20,    //ドロップサイズ
   perturbance: 0.04, //屈折量
});
</script>

パラメータの説明

  名前
  タイプ
  デフォルト
  説明




  imageUrl
  string
  null
  **背景画像の指定**。背景として使用する画像のURL。存在しない場合、プラグインはCSSの`background-image`を代わりに使用しようとします。Data-URIも受け入れられます。


  dropRadius
  float
  20
  **ドロップサイズ。**キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ（ピクセル単位）。


  perturbance
  float
  0.03
  **屈折量。**基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。


  resolution
  integer
  256
  **解像度。**レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。


  interactive
  bool
  true
  マウスのクリックとマウスの動きで効果をトリガーするかどうか。


  crossOrigin
  string
  ""
  影響を受ける画像に使用するcrossOrigin属性。詳細については、[MDNを](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)参照してください。

（参考ページ：https://github.com/sirxemic/jquery.ripples#options）

自動で実行する例

公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。

$('body').ripples("drop", x, y, radius, strength)

以下が具体的なソース例です。

なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。

デモページ

$(document).ready(function() {

	$('.ripples-3').ripples({
		resolution: 128,
		dropRadius: 10,
		perturbance: 0.04,
		interactive: false
	});

// Automatic drops
setInterval(function() {
	var $el = $('.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);

});

<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>
<script src="js/jquery.ripples-min.js"></script>
<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>

参考ページ

Git

https://github.com/sirxemic/jquery.ripples https://github.com/sirxemic/jquery.ripples

参考ソース

https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html

背景に幾何学的なアニメーションを表示するparticles.js

Sun, 26 Feb 2017 00:41:09 +0900

ドメインの所有者を調べるWhoisサイトのdomaintools.comを見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。

「particles.js」というやつらしいです。

jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、domaintools.comのソースを見ていると以下のソースが気になりました。

<canvas id="spiders" class="hidden-xs"></canvas>

そこでspidersを検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。

http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor

ここでparticles.jsということがわかりました。

particles.js

http://vincentgarreau.com/particles.js/ http://vincentgarreau.com/particles.js/

https://github.com/VincentGarreau/particles.js/ https://github.com/VincentGarreau/particles.js/

http://codepen.io/VincentGarreau/pen/pnlso http://codepen.io/VincentGarreau/pen/pnlso

domaintools.comは少し違う動きをしていますが、多分カスタマイズしているんだと思います。

カスタマイズの参考

https://liginc.co.jp/191958 https://liginc.co.jp/191958

https://qiita.com/sapisapi/items/17a1ee6fc539fb104397 https://qiita.com/sapisapi/items/17a1ee6fc539fb104397

Particleground

particles.jsと同じようなParticlegroundというのも見つけました。

http://jnicol.github.io/particleground/ http://jnicol.github.io/particleground/

カスタマイズの参考

https://blog.mismithportfolio.com/web/20150129particleground https://blog.mismithportfolio.com/web/20150129particleground

他にも気になるスクリプトのまとめ

http://www.nxworld.net/tips/background-custom-and-effect-scripts.html http://www.nxworld.net/tips/background-custom-and-effect-scripts.html

http://qiita.com/syui/items/f0baae5cdb4bfd193e35 http://qiita.com/syui/items/f0baae5cdb4bfd193e35

https://ics.media/entry/11172/ https://ics.media/entry/11172/

https://www.webcreatorbox.com/tech/javascript-particles https://www.webcreatorbox.com/tech/javascript-particles

水面に波紋が広がるようなもの

jQueryのファイルとjQuery Ripplesのファイルを読み込めばOK。

http://sirxemic.github.io/jquery.ripples/ http://sirxemic.github.io/jquery.ripples/

いつかマネしたい好みの効果のあるクールなサイトのメモ

Sat, 25 Feb 2017 13:10:07 +0900

https://ics.media/ https://ics.media/

https://whois.domaintools.com/

http://www.feedmusic.com/ http://www.feedmusic.com/