granim.js–创建交互式流体渐变动画的JS库

介绍

granim.js是一个在网页中创建流畅的交互式流体动画的小型JavaScript库,granim.js可以实现各种你想要的渐变的动画效果,是网页色彩更加丰富,视觉效果更佳!


一个创建交互式流体渐变动画的JS库——granim.js

Github

https://github.com/sarcadass/granim.js

快速上手

  • 以下是基本渐变动画(以下是Gif动图)

具有2种颜色组成的队列中的3个渐变的基本渐变动画。

一个创建交互式流体渐变动画的JS库——granim.js
<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种颜色组成。

一个创建交互式流体渐变动画的JS库——granim.js
<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种颜色,背景图像和混合模式设置的渐变动画。

一个创建交互式流体渐变动画的JS库——granim.js
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

发表评论

登录后才能评论