同一页面上多个 <canvas> 元素的初始化脚本

Question

我正在使用名为 Granim 的 jQuery 渐变动画脚本来生成平滑的背景渐变，我发现它看起来比 CSS 渐变要好得多。

目前，当我初始化脚本时，它只对页面上的第一个元素起作用，但我希望它在我页面上的多个元素上重复起作用。

是否可以在页面中的多个重复元素上使用 Granim？

谢谢。

HTML

<canvas class="gradient-bg">It works on this one!</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>

JQUERY

// init
var newInstance = new Granim({
    element: '.gradient-bg',
    defaultStateName: 'state-1,
    direction: 'left-right',
    opacity: [1,1,1,1],
    isPausedWhenNotInView: true,
        states : {
            "state-1": {
                gradients: [
                    ['#AA076B', '#61045F'],
                    ['#02AAB0', '#00CDAC']
            ],
            transitionSpeed: 2500
           }
    }
});

Answer 1

在 Granim documentation 中声明 element 属性可以是字符串或 HTMLCanvasElement，因此您可以简单地遍历 .gradient-bg元素并提供它们作为对实例化调用的引用：

$('.gradient-bg'.each(function() {
  var newInstance = new Granim({
    element: this, // note reference here
    defaultStateName: 'state-1',
    direction: 'left-right',
    opacity: [1, 1, 1, 1],
    isPausedWhenNotInView: true,
    states: {
      "state-1": {
        gradients: [
          ['#AA076B', '#61045F'],
          ['#02AAB0', '#00CDAC']
        ],
        transitionSpeed: 2500
      }
    }
  });
});

同一页面上多个 <canvas> 元素的初始化脚本

Init script on multiple <canvas> elements on same page

foreach

jquery

gradient

repeat