WBL effects library

Section colour glide

The page colour glides between bands as you scroll instead of hard edges.

Use it for: Salons, med spa, restaurants, premium remodelers: a smooth, editorial feel between light and dark bands.
How: <main data-fx="band-shift"><section data-bg="#…" data-ink="#…">. Keep sections' own backgrounds in CSS too (no-JS fallback).
Weight: 1.0 KB gzipped (CSS + JS), no dependencies

Band 1 · paper

Scroll slowly

The band crossing the middle of the screen sets the page colour.

Band 2 · deep

Navy from the van

Pick colours from the business (logo, sign, van) and check both pairs pass 4.5:1.

Band 3 · accent tint

Warm close

Without JS each section simply keeps its own background.

← All effects