Awesome Water Ripples Effect using Jquery

In today's blog, I will show you how you can simplify the ripple effect by creating a snippet. In case if you don't know what the ripple effect is, I will tell you in brief. Ripple effect is a jquery animation that, whenever you click on somewhere, creates a wavy animation effect around the clicking area. It also follows a mouse cursor and creates the animation along its way. It's not that much important, but it looks so subtle and refreshing that some designers use it on their website.

A basic background image on the homepage of any webpage often seems boring for some visitors nowadays. They want some text effect or some background animation on the website. Today we implement a plugin called jquery ripples js in our HTML project, and we will use pure HTML, CSS, and jquery plugin itself.

Our first job is to download the jquery ripples plugin, and after extracting the file, we have to copy the jquery ripples js file from there and put it in our project. We also have to link it to our project. Now for the implementation of any jquery plugin, we need to add the latest jquery file to the project. Without the jquery file, the plugin will not work as it is supposed to be. We will also add a custom js file to our project, where we will put the initiating js code of the ripple animation. You can also accomplish it by pasting the coding inside the script tag at the bottom of the HTML markup.


Now let's start with the HTML markup of this snippet. Here we have taken a nav element inside a simple header tag with five nav items inside. After the nav item, I have some random text inside a simple H2 tag. I have also taken five items as nav items, but you can make more if you want.

At the beginning of the CSS section, we will give a background image to the header after the CSS reset code. Then I will provide header a 100vh value so that it contains the homepage's full viewport height. For this snippet, I have used the Sans-Serif font. You can use any font from google according to your needs. To bring the Nav Element to the top of the header, I gave it to it by absolute position value and gave it a z-Index to show above the header. Since I have used the position absolutely for the nav, I gave a top and left value to the nav so that I could bring it to the center. By providing the basic styling to the nav elements, I have taken the H2 tag in the middle of the header with the absolute position value.

You may also like:

• Ribbon Style Navigation Menu using HTML and CSS
• Awesome Bootstrap slider with Text Animation
• Navigation Bar with Slider using HTML CSS & Bootstrap 4

This time we come to our Ripple Animation after the basic styling is over. Since we've already integrated the jquery ripple js file into my HTML document, we have to do it in the Initiation of the plugin. We have to copy the initiation code given on the Github page of this plugin and paste it in the custom js file. This plugin has some options that we need to understand. The dropRadius is the size of the drop that occurs as a result of ripple. Perturbance means the amount of refraction created by the ripple. The resolution option is basically how smooth the animation is. The higher the value of this option, the slower the ripple animation will be, and the rendering will be more fluid. There are other options available which you play around a bit to make your ripple animation look better.

Awesome Water Ripples Effect using Jquery (Source Code):

You Need three separate files for this. First, you need to make an HTML file for HTML mark up, and then you need to make a CSS file to style the elements that you have written in the HTML file. To initiate the plugin, you can put the jquery code underneath the HTML file, but for the sake of this tutorial, I am using a separate js file with the name of the custom js file. You need to link the CSS file properly and JS Files in the HTML file to get the result. The Source code for this project is given below. What you have to do is to paste the codes in the respective file.

FILES:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script> <script src="custom.js"></script>

HTML:

<header> <nav> <a href="#">Home</a> <a href="#">about</a> <a href="#">portfolio</a> <a href="#">services</a> <a href="#">contact</a> </nav> <h2> Water Ripple Effect</h2> </header>


CSS:

*{ margin: 0; padding: 0; } header { color: #fff; font-size: 16px; font-family: sans-serif; background-image: url(https://i.postimg.cc/2y5SSd1Y/1.jpg); background-size: cover; background-position: 50% 0; height: 100vh; text-align: center; } nav { position: absolute; z-index: 1000; top: 25px; left: 28%; } nav a { text-transform: uppercase; text-decoration: none; color: #fff; padding: 0 25px; font-weight: 900; } nav a:hover { color: darkorange; } h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-weight: 900; font-size: 60px; text-transform: uppercase; -webkit-text-stroke: 1px black; }


JS:

$('header').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, });

Thank you for visiting the Blog.