Data attributes

The browser build initialises [data-sbg] elements on DOMContentLoaded. You can pass options as JSON in data-sbg, as separate data-sbg-* attributes, or both:

<div data-sbg='{"duration": 2000, "easing": "linear"}'
     data-sbg-colors="#D4E66A, rgb(182, 206, 221), #2A3240"
     data-sbg-hold="500ms">
</div>

<body data-sbg data-sbg-mode="sections">
  <section data-sbg-section="#D4E66A">…</section>
  <section data-sbg-section="#2A3240">…</section>
</body>

Attribute names use kebab-case and map to options in camelCase: data-sbg-pause-offscreen="false" becomes pauseOffscreen: false. Values are parsed as JSON where possible. Colors can be a JSON array or a comma separated list.

When you call SmoothBackground.init(selector, options) yourself, data attributes override the options you pass.