Question

我正在尝试使用granim.js插件从data-attribute获取渐变颜色; 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
      }
    }
  });
});

数据属性的渐变颜色

1 个答案: