The jQuery ripple effect plug-in
The design of a website can be improved if you use ripple effect, particularly, in menu items like left or right navigations etc.
In that case, as a user selects or clicks a menu item, the ripple effect in that item can be created by using jQuery and CSS, apart from other ways.
In this tutorial, I am going to show you a simple jQuery and CSS based plug-in that can be integrated into your web design easily.
In this example, a block of a menu is created with a few menu items. As you click an item, the ripple effect will display.
See online demo and code
To make it working, first of all, download the package from the GitHub website. You have to include the ripple.min.css file in the head section:
<link rel=”stylesheet” href=”css/ripple.min.css” type=’text/css’>
The CSS style is also specified in the <style> tag under the <head> tag. You can see it in the demo page.
In the markup section, you have to create div tags with the material-ripple class of the plug-in. For example:
<div class="material-ripple red-ripple"> <span>jQuery</span> </div>
Where red-ripple defines the color of ripple effect. You may also specify the color by using data-ripple-color data attribute, for example:
<div class="material-ripple" data-ripple-color="#2ecc71"> <span>JavaScript</span> </div>
Finally, in the last section just above the </body> tag, include the jQuery and plug-in JS files:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=”js/ripple.min.js”></script>
(Place files at your desired locations)
Get the complete code in the demo page.
A demo of using a different shadow
The material-ripple plug-in has six built-in boxes with shadows that you may specify in the main div:
<div class="material-card material-shadow-1 material-hover">
Just change the material-shadow-1 to material-shadow-2, material-shadow-3 up to 5 for displaying the different shadows.
See the following demo where I have used value 5 in the main div tag while rest of the code remains the same:
See online demo and code
See the complete code in the demo page.
Changing the color scheme of material-ripple
Of course, you can change the color scheme as per need and to match the rest of design your website. For that, you simply need to change or add a fewer properties in the <style> section. For example, to add the background color, you may add the background property in the .material-card class.
See a demo online:
See online demo and code
Similarly, you may use different colors scheme for span tag and box shadows.
Not to mention, you can use other tags than <span> for displaying the content and having a ripple effect. For example, you may use links, paragraphs, or even images and ripple effect will work for those as well. However, take care of the CSS properly.