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

Ripplerはクリックすると波のように広がるエフェクト。ブートストラップのボタンを使用することもできます。
<!-- 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 }); });
MIT