東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

波紋を作るjQueryプラグイン「jQuery Ripples」

2017.07.25 Posted by

こんにちは、ウェブラボ技術メモです。

今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。

まずはDEMO用意致しましたのでご覧下さい。

DEMO

背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。

一見難しそうに見えますが簡単に実装することが可能です。

では解説していきます。以下からプラグインをダウンロードしてきてください。

github

まずはjquery本体と一緒にプラグインを読み込ませます。

■HTMLhead内

次にプラグインの設定を行います。

■HTMLhead内 スクリプト部分

あらかじめ波紋をつけたい要素に背景画像を指定しといてください。

■CSS 指定した要素部分

必要な設定は以上です。スクリプト部分の値を調整することによって自分好みの波紋にすることが可能です。

ですが値の調整が難しかったので試行錯誤することになるかもしれません。

DEMO

仕組みとしては、指定要素の後ろにcanvasタグを敷いてそこで波紋を描画しているようです。

対応ブラウザは、主要ブラウザはもちろんのことIEは11から動作しましたので最新のものである必要があります。

同一ページ内で複数個所に導入するとページがかなり重くなるので注意が必要です。

以上、技術メモでした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278