来自数据属性的渐变颜色

Question

我正在尝试使用 granim.js 插件从数据属性中获取渐变颜色； https://sarcadass.github.io/granim.js/examples.html

<canvas id="canvas-basic" class="granim" data-granim-opacity="[1, 1]" data-granim-colors="[ ['#AA076B', '#61045F'],['#02AAB0', '#00CDAC'],['#DA22FF', '#9733EE'] ]"></canvas>

这是变体；

$('.granim').each(function(){
        var item = $(this),
        granimOpacity = $(item).data('granim-opacity'),
        granimColors = $(item).data('granim-colors');
        var granimInstance = new Granim({
            element: '.granim',
            name: 'basic-gradient',
            direction: 'left-right',
            opacity: granimOpacity,
            isPausedWhenNotInView: true,
            states : {
                "default-state": {
                    gradients: granimColors
                }
            }
        });
    });

不透明度效果很好，但渐变颜色不起作用。

演示； https://codepen.io/anon/pen/owqbaK

Answer 1

使用granimColors作为数组。

gradients 属性 is expecting 数组的数组。

$('.granim').each(function(){
  var item = $(this),
    granimOpacity = $(item).data('granim-opacity'),
    granimColors = $(item).data('granim-colors');

  var granimInstance = new Granim({
    element: '.granim',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: granimOpacity,
    isPausedWhenNotInView: true,
    states : {
      "default-state": {
        gradients: [granimColors] // Change this
      }
    }
  });
});

来自数据属性的渐变颜色

Gradient colors from data attribute

javascript

jquery

gradient

canvas

variations