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

スタッフブログ

波紋のエフェクトを実装する「jQuery Rippleria」

2017.01.25 Posted by

新年1回目のウェブラボ技術メモです。

正月休みはいかがお過ごしだったでしょうか。
今年は姪っ子へのお年玉のあげ方を悩みすぎたお正月でした。
悩んで悩んだ結果、結局いつもの宝探し形式です。

あけましておめでとうございます。

さて、今回はマテリアルデザインでよく見かける、波紋のエフェクトをjqueryプラグイン「jQuery Rippleria」を使用して実装してみたいと思います。

早速下記公式サイトからファイルを落とします。

公式サイト

必要なファイルは
jquery.rippleria.min.js
jquery.rippleria.css

この2つだけです。
まずはこれを読み込ませます。

続いて、下記のようにスクリプトを記述します。
注意したいのは、この記述はbodyの閉じタグ前に記述しないと正常に動きません。

後はHTMLでボタンや画像を記述します。
今回は両方サンプルを用意しました。

それでは出来上がったデモ画面をご覧ください。
デモ画面はこちら

対応ブラウザはFirefox, Chrome, IE10+, Opera, Safariとなっており
念のため、IE9以下でも確認しましたがビタイチ動きません。

ただ、表示が崩れたり、挙動がおかしくなるという事はありませんので
IE9以下は気にしないという事であれば普通に使って問題ありません。

以上、ウェブラボ技術メモでした。

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

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

PAGETOP

お問い合わせContact

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

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

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

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