來自數據屬性的漸變顏色

我試圖從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 
       } 
      } 
     }); 
    });

不透明度是行之有效的，但漸變色不起作用。

Demo; https://codepen.io/anon/pen/owqbaK

來源

2017-07-01 kront

你可以提供演示，然後我可以幫你 –

嘿，我只是猜這裏。但'opacity'是一個整數數組。精細。但是，在你使用'granimColors'的地方...它只是不是一個數組或對象*作爲一個字符串* ...在你的「granimColors」字符串周圍丟失了一些東西。 –

這裏是一個演示; https://codepen.io/anon/pen/owqbaK我創建它從這個https://codepen.io/JonathanSchndr/pen/KgVmLo – kront

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

來源

2017-07-01 05:51:24

所以期望是一個數組的數組。你能提供一個文件鏈接來證明這個*（對未來的讀者來說是有用的）*？ –

看到這個鏈接https://sarcadass.github.io/granim.js/examples.html –

完美的鏈接。讓我編輯你的答案。 ;） –

來自數據屬性的漸變顏色

回答

相關問題