如何使用 jQuery 制作水波纹效果？

在这里，我们将使用 jQuery 在我们的网页上制作水波纹效果。为此，我们将使用 jQuery 涟漪.js。

安装：在继续之前，首先我们必须将水波纹 CDN 文件添加到我们的项目文件中：

https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js

编程需要懂一点英语

方法：

首先，将上述 CDN 添加到您的工作文件中。
放置半径定义了通过在画布上单击或移动鼠标而产生的放置的大小（以像素为单位）。
Perdurance 是由波纹引起的折射量。 0 表示没有折射。
要渲染到的 WebGL 纹理的分辨率、宽度和高度。该值越大，渲染越平滑，涟漪传播越慢。
交互，鼠标点击和鼠标移动这两个事件都可以触发效果。

下面是这个效果的代码。

HTML代码：

HTML



  

    
    
    

  

    
        GeeksForGeeks

Javascript



  

    
  
    
    
      
    

  

    
        GeeksForGeeks

CSS 代码：

body{
    margin: 0;
    padding: 0;
}
  
h1{
    text-align: center;
    color: blueviolet;
    padding-top: 300px;
}
  
.full-landing-image{
    width: 100%;
    height: 100vh;
    background-color: black;
    background-size: cover;
}

JavaScript 代码：

Javascript



  

    
  
    
    
      
    

  

    
        GeeksForGeeks

输出：