Rippler
Effect that spreads like a wave in touch or click.
Currently v0.1.1 ･ Author :
blivesta
Licensed under the MIT.
Examples
Click Or Touch
You can also use the buttons on the bootstrap.
<a class="btn btn-default rippler rippler-inverse" href="#">rippler-inverse</a>
<button class="btn btn-primary rippler rippler-default">rippler-default</button>
<a class="btn btn-success rippler rippler-inverse" href="#">rippler-inverse</a>
<a class="btn btn-info rippler rippler-default" href="#">rippler-default</a>
<a class="btn btn-warning btn-lg rippler rippler-inverse" href="#">rippler-inverse</a>
<a class="btn btn-danger btn-lg rippler rippler-default" href="#">rippler-default</a>Link buttons with state colors
<a class="btn btn-link rippler rippler-bs-primary" href="#">...</a>
<a class="btn btn-link rippler rippler-bs-success" href="#">...</a>
<a class="btn btn-link rippler rippler-bs-info" href="#">...</a>
<a class="btn btn-link btn-lg rippler rippler-bs-warning" href="#">...</a>
<a class="btn btn-link btn-lg rippler rippler-bs-danger" href="#">...</a>Square Image
<span class="rippler rippler-img rippler-bs-primary">
<img src="image.jpg">
</span>Circle image
<span class="rippler rippler-img rippler-circle-mask rippler-bs-success">
<img src="image.jpg">
</span>Circle
<div class="rippler rippler-circle-mask rippler-bs-primary"></div>Square
<div class="rippler rippler-default"></div>Browser support
Requires a browser that CSS3 is supported.
- IE10+
- Safari
- Chrome
- Firefox
- Opera
Installation
Step 1: Link required files
<!-- 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>Step 2: HTML markup
<body>
<button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button>
</body>Step 3: 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
});
});