Modes

Loop (default)

Cycles through the colors over time.

new SmoothBackground('.hero', {
  colors: ['#D4E66A', '#B6CEDD', '#2A3240'],
  duration: 1500,
  hold: 1000,
  easing: 'ease-in-out',
  direction: 'alternate',  // 'normal' | 'reverse' | 'alternate' | 'random'
  iterations: Infinity,    // or a number of full cycles
});

Scroll

Color follows scroll progress. The first color is shown at 0% and the last at exactly 100%, with the rest spread evenly between them.

// Whole page scroll drives the body color
new SmoothBackground(document.body, {
  mode: 'scroll',
  colors: ['#F3F4F1', '#D4E66A', '#2A3240'],
  smooth: 0.85, // inertia, 0 = instant
});
// Scrolling inside a container
new SmoothBackground('.card', {
  mode: 'scroll',
  container: '.card .scrollbox',
  colors: ['#fff', '#2A3240'],
});
// Progress of an element travelling through the viewport
// (0 when its top enters from below, 1 when its bottom leaves at the top)
new SmoothBackground('.panel', {
  mode: 'scroll',
  trigger: '.panel',
  colors: ['#3A4456', '#D4E66A', '#B6CEDD'],
});

Sections

Every section declares its colors. The target element (usually <body>) smoothly switches when a section crosses the activation line, which by default is the middle of the viewport.

<body>
  <section data-sbg-section="#D4E66A">…</section>
  <section data-sbg-section='{"background-color": "#2A3240", "color": "#EEF1EA"}'>…</section>
  <section data-sbg-section>…</section> <!-- empty: uses options.colors[index] -->
</body>
<script>
  new SmoothBackground(document.body, {
    mode: 'sections',
    duration: 900,
    threshold: 0.5,
  });
</script>

You can also pass sections as any selector, NodeList or array. Sections without a data-sbg-section value take colors from options.colors in order.

Light / dark sections with classes

Colors are only half of a theme. To restyle anything else by hand, such as a logo, borders or the header, give a section a data-sbg-class. While that section is active, its classes are added to the target element (e.g. <body>), and they are removed again when another section takes over. The switch is instant, so your CSS changes in sync with the start of the color blend.

<section data-sbg-section="#F3F4F1">…</section>
<section data-sbg-section='{"background-color": "#2A3240", "color": "#EEF1EA"}'
         data-sbg-class="is-dark">…</section>

body.is-dark .header { border-color: rgba(255, 255, 255, .12); }
body.is-dark .logo   { filter: invert(1); }

The active section itself gets the activeClass class (is-sbg-active by default; pass null to turn it off), which is handy for navigation highlights or in-view effects. Several classes can be given separated by spaces: data-sbg-class="is-dark has-glow".