jQuery

【jQuery】クリックすると波のように広がるエフェクトRippler

June 4, 2017

Ripplerはクリックすると波のように広がるエフェクト。ブートストラップのボタンを使用することもできます。

Installation

<!-- If you want to use the buttons on the bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- rippler CSS -->
<link rel="stylesheet" href="./css/rippler.min.css">

<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- rippler js -->
<script src="./dist/js/jquery.rippler.min.js"></script>

HTML markup

<body>
  
  <button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button>

</body>

Call the rippler

$(document).ready(function() {
  $(".rippler").rippler({
    effectClass      :  'rippler-effect'
    ,effectSize      :  16      // Default size (width & height)
    ,addElement      :  'div'   // e.g. 'svg'(feature)
    ,duration        :  400
  });
});