Water Ripple effect on Image with css and jquery

Water Ripple effect animation on Background Image with css and jquery

Water Ripple effect animation on Image with css and jquery

Iss post me hum janenge ki aap kaise kisi bhi image pr water ripple effect de sakte hai.

But osse pehle hum janenge ki akhir water ripple effect hota kya hai. What is Water Ripple effect

What is Water Ripple effect

Aap ne kabhi zaroor dekha hoga jab aap kisi pani me pathhar(any object) fekte hai to pani(water) me ek lehr banti hai.

Jo shuru hone pr choota hota hai aur jaise-jaise badhta hai bada hota jata hai. ajise ki ooper image me hai

Isi effect ko hum water ripple effect kehte hai.

To chaliye hum ek page banate hai aur oosme ripple effect dete.

Water Ripple effect with css and JQuery

Sabse pehle ek file index.html create kijye aur iss link https://code.jquery.com/ pr click kr ke Jquery ke cdn ko copy kr lijye.

Ab jo niche code likha hai oose index.html me copy-paste kr dijye.

[sociallocker id=”188″]

Full Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>kafarooqui - Water ripple effect on Image</title>
    <style media="screen">
      body{
        padding:0;
        margin:0;
      }
      div{
        background:url(fish.jpg);
        width:100%;
        height:100vh;
        background-position:center;
        background-size:cover;

      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js" charset="utf-8"></script>
<script src="jquery.ripples.js" charset="utf-8"></script>
<script src="jquery.ripples-min.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('div').ripples({
    dropRadius:"12",
  perturbance: "0.05",
  });
})
</script>

  </head>
  <body>

  </body>
  <div >
For more log on to <a href="https://www.kafarooqui.in">kafarooqui.in</a>
  </div>
</html>

..

[/sociallocker]

Oper ke code me maine fish.jpg background me use kiya hai aap koi sa bhi image use kr skte hai.

But agar aap kisi Sea ya Oceans ka use krenge to aur bhi zyada feel dega.

Aap aap ko kuchh script download krna hoga jaisa ki hamne oopr ke post me liya hai.

Aapko simple iss link https://github.com/sirxemic/jquery.ripples pr jana hai aur zip file download kr lena hai.

Agar aap mobile se iss page pr visit kr rahe hai to browser ko Desktop mode me change kr lijye.

Ab aap oos zip file ko extract kr lijye , extract krne ke baad Master/dist folder me aapko ye dono file milega

jquery.ripples.js 
jquery.ripples-min.js

Iss dono file ko copy kr lijye , aur jaha aapne index.html bnaya hai oosme iss file ko paste kr dijye.

ye dono page ko link krna padta hai kuchh aise

<script src="jquery.ripples.js" charset="utf-8"></script>
<script src="jquery.ripples-min.js" charset="utf-8"></script>

jo ki index.html me pehle se kiya hua hai.

Aap ka effect lagbhag taiyaar hai but abhi isme kuchh script aur add krna hoga.

<script type="text/javascript">
$(document).ready(function(){
  $('div').ripples({
    dropRadius:"12",
  perturbance: "0.05",
  });
})
</script> 

ye code maine pehle hi add kiya hua hai agar aap index.html ko dekhe to.

Congratulation aapka water ripple effect complete ho chuka hua , page ko save kr ke kisi browser se open kijye.Aur oos page pr Mouse pointer ko move kijye.

I hope guy’s ye code sahi se kaam kr rha hoga , agar koi dikkat aa rahi hai to aap comment kijye mai aapke comment ka reply zaroort dunga.

Guy’s aap mere YouTube Channel ko bhi subscribe kr skte aise hi post dekhne ke liye.

YouTube Channel link ~ Click here to go to Channel page ya niche Red Button ko click kr kr dijye.

Query Solved in this post :

water ripples effect on image
water effect css animation
ripple animation css
ripple effect mouse over
button ripple js
github jquery ripples
water drop effect jquery
ripple effect css, js and jquery

Topic Covered :

water effect website
water flow effect in jquery
ripple effect codepen
ripple effect slider
jquery water wave animation

Leave a Comment