jQuery Water Ripple Effect | Animated Background

Hello Friends, Today in this blog, we will create an animated background using HTML, CSS, and jquery. We will see how we can quickly implement the Water Ripple Effect in the Home Section of our Website. Now, What it does is, adds a layer of water to the HTML elements and it will ripple by cursor movement. We will implement a jquery plugin named 'jquery. ripples' for this project. Please follow the below tutorial for a better understanding.

I hope you watched the video. Search by the name 'water ripple jquery plugin' in google. Download the plugin made by 'sirxemic.' After unzipping the file, take the 'jquery.ripples.js' file and add it to your HTML file. Add the latest jquery for the plugin to work. After that, copy the code below the code boxes and paste them into your files. You can also download the code if you want from the download button below.

ADD HTML

<!doctype html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>JQuery Water Ripple Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section>
        <header>
            <h1>JQuery Water Ripple Effect</h1>
            <h2>A Nice JQuery Plugin for your Website</h2>
        </header>
    </section>


    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.ripples.js"></script>

    <script>
        $('body').ripples({
            resolution: 512,
            dropRadius: 20,
            perturbance: 0.04
        });
    </script>
</body>
</html>

ADD CSS:

  html{
    height: 100%;
}
body{
    font-size: 16px;
    color: #fff;
    background-image: url(https://i.postimg.cc/XvT12qdD/3.jpg);
    -webkit-background-size:cover;
    background-size:cover;
    background-position: 50% 0;
    height: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
body:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
section{
    display: inline-block;
    vertical-align: middle;
    padding: 100px;
    max-width:500px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

That's all. I hope you have created your version of the snippet. Our Website has many snippets about CSS Animation, Full Responsive Website design, Javascript projects, and so on. If you want to get those you can click the load more button below the homepage of our website and scroll down the page. Thank you for the visit.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

jQuery Water Ripple Effect | Animated Background

You might like

Post a Comment

Post a Comment

Contact Form