在 jQuery 和 granim.js 中使用 CMS 数据

Question

我想在当前项目中使用 granim.js，但是在文档中只能将颜色值硬编码到脚本中。但是，我想让这些颜色值可以从我的 Wordpress CMS 中选择，所以我想知道如何将这些值传递到 granim 脚本中？

是否可以将十六进制代码替换为数据属性，然后将CMS颜色值输出到DOM中供jquery参考？

我将如何实现这一目标？

非常感谢。

示例JQUERY

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'] // Can we replace these with data attributes from the DOM?
            ]
        }
    }
});

示例HTML

<div id="canvas-basic" data-colour-1="#000000" data-colour-2="#FFFFFF">This div to have gradient background</div>

Answer 1

我想你可以这样实现：-

jQuery(document).ready(function()
{

var col1=jQuery('#canvas-basic').attr('data-colour-1');
var col2=jQuery('#canvas-basic').attr('data-colour-2');

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                [col1, col2] // Can we replace these with data attributes from the DOM?
            ]
        }
    }
});

});

在 jQuery 和 granim.js 中使用 CMS 数据

Using CMS data in jQuery with granim.js

javascript

wordpress

jquery

gradient