Skip to content

Instantly share code, notes, and snippets.

@PauliusKrutkis
Created March 13, 2017 18:43
Show Gist options
  • Save PauliusKrutkis/69f21eacb401882da8e0a6f83380b2e8 to your computer and use it in GitHub Desktop.
Save PauliusKrutkis/69f21eacb401882da8e0a6f83380b2e8 to your computer and use it in GitHub Desktop.
Button wave animation, inspired by material design
<button type="button" class="waves button" name="button">Button</button>
<style media="screen">
@keyframes ripple {
100% {
transform: scale(2);
opacity: 0;
}
}
.waves{
position: relative;
overflow: hidden;
display: inline-block;
}
.waves .particle{
transform: scale(0);
background: rgba(0, 0, 0, 0.4);
width: 0;
height: 0;
border-radius: 50%;
position: absolute;
opacity: 1;
pointer-events: none;
}
.animation{
animation: ripple .5s linear;
}
</style>
<script type="text/javascript">
var waves = (function($) {
var particle = '.particle';
var template = '<span class="particle"></span>';
var element = '.waves';
$('body').delegate(element, 'click', animate);
function animate(e) {
var $this = $(this);
$this.find(particle).remove();
var width = $this.width() * 3;
var height = $this.height() * 3;
var posX = $this.offset().left;
var posY = $this.offset().top;
$this.prepend(template);
if (width >= height)
height = width;
else
width = height;
var x = e.pageX - posX - width / 2;
var y = e.pageY - posY - height / 2;
$this.find(particle).css({
width: width,
height: height,
top: y + 'px',
left: x + 'px'
}).addClass('animation');
}
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment