介绍

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

Github

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

快速上手

• 以下是基本渐变动画（以下是Gif动图）

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

#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种颜色组成。

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
        }
    }
});

• 带有图像蒙版的渐变

带有图像蒙版的渐变动画，可在形状下创建渐变动画。

    
    Granim.js

.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可以打造一个非常炫彩的网页色彩动画，为某些场景下的网页增加视觉冲击，效果颇为不错！