Material Design-Style Click/Touch Animations with jQuery and CSS3

Yet another jQuery & CSS3 solution to create interactive ripple animations upon touch or click as seen on Google Material Design. Based on modernizr.js and CSS3 keyframes.

See also:

• Android L Style Click/Touch Effects with jQuery and CSS3 - rippler
• Google Material Design Ripple Effects with jQuery and CSS3
• Material Design Action Button Transition Effect with jQuery and CSS3
• Google Material Design Concept UI Button with jQuery and CSS3
• jQuery Plugin To Add Google Material Design Ripple Animations To Buttons

How to use it:

1. Include prefixfree.js for CSS3 vendor prefix.

<script src="prefixfree.min.js"></script>

2. Include modernizr.js Javascript library.

<script src="modernizr.js"></script>

3. Create a container where you wish to active the ripple animation on touch or click.

<div id="container">
  ...
</div>

4. The CSS/CSS3 rules to create the animated ripples.

.dot {
  height: 2px;
  width: 2px;
  border-radius: 100%;
  position: absolute;
  z-index: 0;
  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
}

@keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}

5. Include the latest jQuery library at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

6. The Javascript to create click/touch animations.

if (Modernizr.touch) {   
    $('#container').on('touchstart',function(e) {
      var left = e.originalEvent.touches[0].pageX;
      var top = e.originalEvent.touches[0].pageY;

      $(this).append('<div class="dot" style="top:'+top+'px;left:'+left+'px;"></div>')
      setTimeout(function(){
        $('#container .dot:first-of-type').remove();
      },3000);
    });
    document.body.addEventListener('touchmove',function(e){
        e.preventDefault();
    });
} else {   
    $('#container').on('mousedown',function(e) {
      var left = e.pageX;
      var top = e.pageY;

      $(this).append('<div class="dot" style="top:'+top+'px;left:'+left+'px;"></div>')
      setTimeout(function(){
        $('#container .dot:first-of-type').remove();
      },3000);
    }); 
}

7. Initialize the ripple animations.

$(window).ready(function(){
  setTimeout(function(){
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },900);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },600);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },300);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },0);
    setTimeout(function(){
      $('#container .dot').remove();
    },2900);
  },1500);
});

---

This awesome jQuery plugin is developed by designcouch. For more Advanced Usages, please check the demo page or visit the official website.