介绍
granim.js是一个在网页中创建流畅的交互式流体动画的小型JavaScript库,granim.js可以实现各种你想要的渐变的动画效果,是网页色彩更加丰富,视觉效果更佳!
Github
https://github.com/sarcadass/granim.js
快速上手
- 以下是基本渐变动画(以下是Gif动图)
具有2种颜色组成的队列中的3个渐变的基本渐变动画。
<canvas id="canvas-basic">canvas>
#canvas-basic {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
var granimInstance = new Granim({
element: \'#canvas-basic\',
direction: \'left-right\',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
[\'#ff9966\', \'#ff5e62\'],
[\'#00F260\', \'#0575E6\'],
[\'#e1eec3\', \'#f05053\']
]
}
}
});
- 复杂渐变动画
复杂的渐变动画,队列中有2个渐变,不同位置由3种颜色组成。
<canvas id="canvas-complex">canvas>
var granimInstance = new Granim({
element: \'#canvas-complex\',
direction: \'left-right\',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
[
{ color: \'#833ab4\', pos: .2 },
{ color: \'#fd1d1d\', pos: .8 },
{ color: \'#38ef7d\', pos: 1 }
], [
{ color: \'#40e0d0\', pos: 0 },
{ color: \'#ff8c00\', pos: .2 },
{ color: \'#ff0080\', pos: .75 }
],
]
}
}
});
- 具有图像和混合模式的渐变动画
具有2种颜色,背景图像和混合模式设置的渐变动画。
var granimInstance = new Granim({
element: \'#canvas-image-blending\',
direction: \'top-bottom\',
isPausedWhenNotInView: true,
image : {
source: \'../assets/img/bg-forest.jpg\',
blendingMode: \'multiply\'
},
states : {
"default-state": {
gradients: [
[\'#29323c\', \'#485563\'],
[\'#FF6B6B\', \'#556270\'],
[\'#80d3fe\', \'#7ea0c4\'],
[\'#f0ab51\', \'#eceba3\']
],
transitionSpeed: 7000
}
}
});
- 带有图像蒙版的渐变
带有图像蒙版的渐变动画,可在形状下创建渐变动画。
class=“bloc-logo”> <canvas id=“logo-canvas”>canvas> <a href=“index.html” class=“logo-mask”>Granim.jsa> div>
.bloc-logo {
position: relative;
width: 130px;
height: 49px;
float: left;
}
.bloc-logo canvas,
.bloc-logo .logo-mask {
display: block;
width: 130px;
height: 49px;
}
.bloc-logo .logo-mask {
position: absolute;
top: 0;
left: 0;
background-size: 130px;
background-image: url("../img/logo-mask.png");
text-indent: -9999px;
}
var granimInstance = new Granim({
element: \'#logo-canvas\',
direction: \'left-right\',
states : {
"default-state": {
gradients: [
[\'#EB3349\', \'#F45C43\'],
[\'#FF8008\', \'#FFC837\'],
[\'#4CB8C4\', \'#3CD3AD\'],
[\'#24C6DC\', \'#514A9D\'],
[\'#FF512F\', \'#DD2476\'],
[\'#DA22FF\', \'#9733EE\']
],
transitionSpeed: 2000
}
}
});
总结
granim.js是一个非常不错的网页渐变色动画库,通过granim.js可以打造一个非常炫彩的网页色彩动画,为某些场景下的网页增加视觉冲击,效果颇为不错!
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/18429.html