HTML5-CANVAS+granim.js背景颜色渐变插件HTML5动画

这是一款基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。

使用方法

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

<script src="granim.min.js"></script>

HTML结构

在使用背景颜色渐变的地方放置一个HTML5 canvas元素。

<canvas id="canvas-demo"></canvas>

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该插件。

var granimInstance = new Granim({
element: '#canvas-demo',
states : {
"default-state": {
gradients: [
['#485563', '#29323c', '#29323c'],
['#00c6ff', '#0072ff', '#0072ff']
],
transitionSpeed: 10000
}
}
});

方法

// 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();

源码来源:https://github.com/sarcadass/granim.js

在线预览 网盘下载
下载密码: 3qjt

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(手机号15240025146),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

1条评论

发表评论