jQueryRipplesの使い方 - 日常のあれこれ。

f:id:creat4869:20190821164739p:plain

jQueryで作れるアニメーションについて調べている時、面白いものを見つけました！
それがRipplesというjQueryです！

これは『水面に波紋が広がるような表現』を可能にしてくれるjQueryです！
設定している範囲内でクリックをすると水に指をつけた時のような波紋が表現されるのです。

導入は簡単なので、さっそくやり方を説明していきます＾＾

HTML

<body>
  <div class="container">
    <!--入れたいコンテンツ(画像など)-->
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/jquery.ripples-min.js"></script>
</body>

jquery.ripples-min.jsというファイルを公式サイトなどからダウンロードし、自分のサイト内に配置しておきましょう。
ここでは、.containerというクラス名の範囲に波紋が適応されるようになります。

CSS

.container{
  height:100vh; // ここは自分が入れたいコンテンツのCSSを書く
}

jQuey

$(document).ready(function(){
  $('.container').ripples({
    resolution: 400
  });
});

これでクリックすると波紋が表示されるようになります！
resolutionの数字を変えて波紋の大きさを変更したりと、オプションもいろいろあるようなので、設定してみるのもいいかもしれません＾＾