Description

Recently Google released its material design spec which showcases some very cool user interactions. One of them is the ripple click effect where an ink-drop like element moves out radially from the position where the user taps/clicks. This effect has also been integrated in the paper elements collection in the Polymer Project by Google. This walkthrough creates the same effect using jQuery, CSS3 and simple HTML elements instead of web components.

The logic here is to create circles at click coordinates behind the links with the parent item using overflow: hidden; to contain the ink element. The circles are initially scaled down to 0% and then animated to 250% to cover the entire parent element. As the circles increase in size their opacity starts to decrease.