granim.js是一个在网页中创建流畅的交互式流体动画的小型JavaScript库，granim.js可以实现各种你想要的渐变的动画效果，是网页色彩更加丰富，视觉效果更佳！ ### 基本渐变动画具有2种颜色组成的队列中的3个渐变的基本渐变动画 ```html

``` ```js var granimInstance = new Granim({ element: '#canvas-basic', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } } }); ``` ![image.png](/uploads/20210220/94556584778e3736577ad9b7709c38d4.jpg) ### 具有图像和混合模式的渐变动画具有2种颜色，背景图像和混合模式设置的渐变动画 ```html

``` ```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 } } }); ``` ![image.png](/uploads/20210220/46269fc61c6a5cb502a1c88398a6c975.jpg) ### 互动渐变创建一个可以响应事件的渐变动画。单击渐变动画中的不同状态以查看渐变的变化 ```html

Default state Violet state Orange state

``` ```js var granimInstance = new Granim({ element: '#canvas-interactive', name: 'interactive-gradient', elToSetClassOn: '.canvas-interactive-wrapper', direction: 'diagonal', isPausedWhenNotInView: true, stateTransitionSpeed: 500, states : { "default-state": { gradients: [ ['#B3FFAB', '#12FFF7'], ['#ADD100', '#7B920A'], ['#1A2980', '#26D0CE'] ], transitionSpeed: 10000 }, "violet-state": { gradients: [ ['#9D50BB', '#6E48AA'], ['#4776E6', '#8E54E9'] ], transitionSpeed: 2000 }, "orange-state": { gradients: [ ['#FF4E50', '#F9D423'] ], loop: false } } }); // With jQuery $('#default-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('default-state'); setClass('#default-state-cta') }); $('#violet-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('violet-state'); setClass('#violet-state-cta') }); $('#orange-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('orange-state'); setClass('#orange-state-cta') }); function setClass(element) { $('.canvas-interactive-wrapper a').removeClass('active'); $(element).addClass('active'); }; ``` ![image.png](/uploads/20210220/026e383591d15a0d052775a03926f892.jpg) [下载](https://github.com/sarcadass/granim.js/releases) [API文档](https://sarcadass.github.io/granim.js/api-v2.0.0.html)