Awesome Water Ripples Effect using Jquery

In today's blog, I will show you how you can jquery water ripple effect by creating a snippet. In case you don't know what the ripple effect is, I will tell you in brief. The 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 important, but it looks so subtle and refreshing that some designers use it on their websites.

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

Our first job is to download the jquery ripples plugin which is a 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. 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 code inside the script tag at the bottom of the HTML markup. You can create a separate JavaScript file and paste the initiating code there. The video tutorial below shows the step-by-step process of how to create this snippet. Watch the video tutorial for better understanding.

Video Tutorial:

Now let's start with the HTML markup of this water ripple background animation 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 the 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 the nav a top and left value 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:

• Personal Portfolio Website Design
• Animated Skill bar using HTML CSS
• 3D Card Flip CSS Animation

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 must 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 into 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 that you play around with 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 markup, 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 the JS Files in the HTML file to get the result. The jQuery water ripple animation source code for this project is given below. What you have to do is to paste the code into the respective file. If you want you can also download the source code from the download button below.

ADD HTML:

<!DOCTYPE html> <html lang="en"> <!-- codingflicks.com --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Awesome Water Ripples Effect using Jquery</title> <link rel="stylesheet" href="style.css"> </head> <body> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script> <script> $('header').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); </script> </body> </html>


ADD CSS:

* { margin: 0; padding: 0; } header { color: #fff; font-size: 16px; font-family: sans-serif; background-image: url(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; }

I hope you like this water ripple effect code. If you want more CSS Animation and Javascript snippets then click the load more button on our homepage. Thank you for visiting the Blog.

SOURCE CODE