当前位置：首页 > 网页特效 > 背景

基于canvas的背景颜色渐变动画插件

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

基于canvas的背景颜色渐变动画插件

简介

在页面中引入granim.min.js文件。

```html
<script src="granim.min.js"></script>    
```             
#####  HTML结构
在使用背景颜色渐变的地方放置一个HTML5 canvas元素。

```html
<canvas id="canvas-demo"></canvas>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。

```html
var granimInstance = new Granim({
    element: '#canvas-demo',
    states : {
      "default-state": {
          gradients: [
              ['#485563', '#29323c', '#29323c'],
              ['#00c6ff', '#0072ff', '#0072ff']
          ],
          transitionSpeed: 10000
      }
    }
});
```
#####  方法
```javascript
// Change state by putting its name in the argument
granimInstance.changeState('state-name');
 
// Play the animation
granimInstance.play();
 
// Pause the animation
granimInstance.pause();
 
// Stop the animation and clear the gradient
granimInstance.clear();
 
// Change the direction
granimInstance.changeDirection('direction-name');
 
// Change the blending mode (useful only if you use an image)
granimInstance.changeBlendingMode('blending-mode-name');
 
// Destroy an instance and remove its events listeners
granimInstance.destroy();  
```

web299.com

基于canvas的背景颜色渐变动画插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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