当前位置：首页 > 网页特效 > canvas

HTML5 canvas水波纹动画特效

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

HTML5 canvas水波纹动画特效

简介

在页面中引入jquery和jquery.waterrippleeffect.min.js文件。

```html
<script src='path/to/js/jquery.min.js'></script>
<script src='path/to/js/jquery.waterrippleeffect.min.js'></script>
```
#####  HTML结构
使用一个div作为该水波纹动画特效的HTML结构：

```html
<div id="holder"></div>   
```    
#####  初始化插件
通过纯js的方式来调用该水波纹动画效果的代码如下：

```javascript
function init() {
 
  //Settings - params for WaterRippleEffect
  var settings = {
      image: './img/SwimmingPool.jpg',//背景图片
      rippleRadius: 3,//radius of the ripple
      width: 480,//width
      height: 480,//height
      delay: 1,//if auto param === true. 1 === 1 second delay for animation
      auto: true//if auto param === true, animation starts on it´s own
  };
 
  //------------------------------------------------------------------------
 
  //standalone
  //初始化
  var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );
  document.getElementById( 'holder' ).style.cursor = 'pointer';
 
  //鼠标点击事件
  document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {
      var mouseX = e.layerX;
      var mouseY = e.layerY;
      waterRippleEffect.disturb( mouseX, mouseY );
  } );
 
  //鼠标移动事件
  document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {
      var mouseX = e.layerX;
      var mouseY = e.layerY;
      waterRippleEffect.disturb( mouseX, mouseY );
  } );           
```
通过jquery插件的方式来调用该水波纹动画效果的代码如下：

```javascript
$( '#holder' ).waterRippleEffect( settings );
$( '#holder' ).css( 'cursor', 'pointer' );
 
//鼠标点击事件
$( '#holder' ).click( function( e ) {
    var mouseX = e.pageX - $( this ).offset().left;
    var mouseY = e.pageY - $( this ).offset().top;
    $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
 
//鼠标移动事件
$( '#holder' ).mousemove( function( e ) {
    var mouseX = e.pageX - $( this ).offset().left;
    var mouseY = e.pageY - $( this ).offset().top;
    $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );     
```

web299.com

HTML5 canvas水波纹动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果