jQuery Rippleriaは、マテリアルデザインでよく見かける、ボタンやオブジェクトを押した際の波紋エフェクトを実装できるjQueryプラグインです。
まずは、こちらのサンプルページをご覧ください。
水滴が落ちて、波紋が広がっていくようなエフェクトです。
画像に実装することもできます。こちらは、ホバーカラーをランダムで変更しています。
使い方
サンプルページに実装してみました。
ダウンロードページ上部にある「DONWLOAD.ZIP」からソースコードをダウンロードします。
ZIPファイルを展開したら、cssフォルダに入っている「jquery.rippleria.min.css」と、jsフォルダに入っている「jquery.rippleria.min.js」を使います。
CSS
jquery.rippleria.min.cssを読み込みます。
<link href="css/jquery.rippleria.min.css"/ rel="stylesheet">
buttonのスタイルを用意します。
<style> /*-------------------- ボタンのスタイル --------------------*/ button:focus { /*Chromeなどでフォーカス時にアウトラインがつくので0にする*/ outline: 0; } button { /*ホバー時のカーソルをリンクカーソルに変更*/ cursor: pointer; } button { min-width: 160px; border: none; border-radius: 5px; margin: 1.5rem 0.5rem 0; padding: 1.2rem 2.8rem; background: #169d82; font-size: 1.6rem; text-align: center; color: #fff; } button:hover { background: #12816a; } /*-------------------- 画像用のスタイル --------------------*/ #rippleria { display: inline-block; } </style>
JS
jQueryとjquery.rippleria.min.jsを読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="js/jquery.rippleria.min.js"></script>
画像用のスクリプトです。</body>
閉じタグより前で、スクリプトを実行します。ホバーカラーをランダムで変更しています。
<script> $('#rippleria').rippleria({ // aniamtion speed duration: 750, // custom easing effect easing: 'ease-in' }); $('#rippleria').click(function(e) { e.preventDefault(); var randInt = function (min, max) { var rand = min + Math.random() * (max - min) rand = Math.round(rand); return rand; }; $(this).rippleria('changeColor', 'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5)); }); </script> </body>
HTML
<!--ボタン--> <button data-rippleria class="btn btn-primary">Click me!</button> <!--ボタン(波紋をカスタマイズ)--> <button data-rippleria data-rippleria-color="rgba(181,241,39,.35)" data-rippleria-duration="1000" data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)" class="btn btn-default">Custom</button> <!--画像--> <div> <a id="rippleria" href="#"> <img src="img/photo.jpg"> </a> </div>
以上で、実装は完了です。