#16 必殺の波紋疾走（オーバードライブ）ふるえるぞ背景！-jQueryで背景に波紋水の表現-【ぴよぴよコーダーの開発日記】

2020年3月1日 12:44

水やしずくに関連するオーダーを受けたので、背景に波紋が広がるようなページを作ります。

便利な世の中ですね。1行で実装できてしまうとは。jQueryプラグインの「jQuery Ripples」（公式デモ）を使用します。

使い方、上記URLからjquery.ripples-min.jsをダウンロードして、下記コードを書くだけ。

$(function() {
 $('body').ripples();
});

デモ作りました。クリックやタップ、ホバーしてみてください。

デモ（ファーストビューのみ）　デモ（スクロール可能）　

さて、つまずいたところといえば、こちらのプラグイン、localhost立ててない環境だと、CORSエラーが出ます。

最初、横着してfileプロトコルで（ブラウザにHTMLファイル投げて）確認してたのですが、下記のようにコンソールエラーが出ます。

エラー読んでみると、Access to image at 'file:///C:/Users/.../bg.png' from origin 'null' has been blocked by CORS policy（bg.pngへのアクセスはCORSポリシーによってブロックされた）Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.（クロスオリジンリクエストは、httpとかhttpsとかのプロトコルスキームでサポートされている）

プラグイン内部でAjaxで別ドメインからの画像を取得しようとしているのかな。このエラーが出ているときは、clickイベントは動いても、hoverイベントは動きませんでした。なので、httpかhttps環境下で動かしましょう。

ちなみにCORSエラーに関しては、下記が参考になります。

なんとなく CORS がわかる...はもう終わりにする。

CORS (Cross-Origin Resource Sharing) ってなに？

そして波紋の実装方法には下記を参考にしました。

【jQuery】リアルな波紋模様を再現する［jQuery Ripples］を使ってみる。

JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現

しっかしタイトルはジョジョの波紋編からとったけど、懐かしいなぁ。