Modules Scroll Colour
Scroll Colour
The page background, and the text with it, change colour as sections scroll in. Give rows a colour each and the page blends from one to the next, or let a single row fade from a start colour to its own. Colours can come from a custom field.
↓ Scroll slowly: four sections share one page colour, then two rows change on their own.
Live demo · Pro · Page background 1 / 4
Midnight
Rows set to Page background share one colour. As this row reaches the middle of the screen (the trigger line, 50%), the page blends into its colour: deep violet with white text.
#1b1446 · text #ffffff
Live demo · Pro · Page background 2 / 4
Coral
Next row, next colour. The text colour is set too, so headings and text without a colour of their own turn dark to stay readable. Blend with the scroll means the change follows your scrolling, forwards and back.
#ff7a59 · text #1a0f0a
Live demo · Pro · Page background 3 / 4
Paper
Each row only sets its own colours; the blending between them is automatic. Scroll back up and the colours return in reverse.
#fdf8f1 · text #171a2b
Live demo · Pro · Connected colour
Ocean
This row's background colour is connected to a custom field of the page (km_sc_brand), using Beaver Themer's field connections. Change the field and the colour follows; a brand colour per post or product works the same way.
custom field km_sc_brand
Live demo · Pro · This row only
A row that colours itself in
With Colour: This row only, the row blends from a start colour (#121829, the usual section colour) to its own (#c9bcff) as it scrolls up to the trigger line, and the text from light to dark. The page around it does not change.
Live demo · Pro · Fade at the trigger line
Or change at one moment
Change: Fade at the trigger line switches the colour once the row's top passes 60% of the screen, with a 900 ms fade, and back when you scroll up. Good for a section that should feel like a new chapter.
How to use it
Where to find it
- Open a row's Kinetic tab → Scroll Colour and switch it on.
- Colour: Page background for every row that should take part. Give each a background and, if you like, a text colour. The first of these rows sets the change (blend or fade) and the trigger line for the page.
- Colour: This row only for a single row: set a start background (or leave it empty to fade in from transparent) and a start text colour.
- Change: Blend with the scroll follows the scroll position; Fade at the trigger line switches with a fade time you choose.
- Keep text readable (on by default): while two colours blend, if the mixed text and background would fall below a 4.5:1 contrast, the text takes whichever end colour reads better.
- Every colour field takes Beaver Builder global colours and field connections, such as a custom field or an ACF colour picker.
Text colour applies to headings and text that have no colour of their own; modules with their own colour keep it. In the builder and without JavaScript each row shows its colours, and visitors who prefer reduced motion get the colours without the blending.
Good to know
- Only colours change: nothing moves, nothing shifts the layout
- Reduced motion: colours without the blending
- No JavaScript or in the builder: each row shows its colours
- Background images and gradients stay on top of the colour
Pro Pro adds
- A page colour shared by any rows
- A single row that colours itself in
- Blend with the scroll, or fade at a trigger line
- Text colour and field connections
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.