Scroll Reveal
Text that starts faint and fills in, word by word or letter by letter, as visitors scroll it up the screen.
Scroll Reveal makes the text of a Custom Heading or Text Block start faint and fill in as it scrolls up the screen, as if someone were reading it along. Scroll back up and the text fades out again, because the fill follows the scroll position rather than playing once.
It works best on large text: a statement, an intro, or a story told in a few paragraphs. A typical use is a sticky image on one side and a story that fills in on the other. See Build a sticky image with a story.
Where to find it: edit a Custom Heading or Text Block in WPBakery and look for Scroll Reveal next to the CSS animation setting.
How it behaves
- Fills in as you scroll. The first word (or letter) starts filling in once the text is in the lower part of the screen, and the last one finishes when the bottom of the text reaches the middle of the screen. Words fill in a few at a time, so the edge of the fill is soft rather than a hard line.
- One text across elements. Elements with Scroll Reveal that sit right after each other in the same column (spacers between them are fine) fill in as one text, one after the other. A heading followed by three paragraphs reads as a single story, instead of every paragraph starting over. An image or another element in between starts a new text.
- Near the end of the page. Text that can't scroll up to the middle of the screen, such as a statement just above the footer, finishes filling in when the page reaches the bottom.
- Keeps your formatting. Links, bold, italics and other markup inside the text stay as they are. With By letter, words still stay whole, so they never break across two lines.
- Respects reduced motion. Visitors who prefer reduced motion see the text as is, fully visible.
- Front-end editor. The front-end editor shows the text as is, so it stays easy to edit.
- Loads only where it's used. The script and styles only load on pages that have an element set to Scroll Reveal.
Settings
Offhb_scroll_revealOptions: Off, By word (each word fills in, a good fit for paragraphs and statements), By letter (each letter fills in, a finer effect). Best on large text. Leave CSS animation off on the same element, as the two effects don't go together.
0.2hb_scroll_reveal_opacityHow visible the text is before it fills in, from 0 (hidden) to 1 (fully visible). Default 0.2. Only shown when Scroll Reveal isn't Off.
The faint text is the same color at a lower opacity, so it blends toward the background. Use a text color with good contrast against the background, or the fill-in is hard to see.
Build a sticky image with a story
An image that stays in view on one side while a story fills in, word by word, on the other.
- Add a row with two columns.
- On the image column, add an image. Open the column's Layout tab and set Sticky to Stick below the top (or Stick in the middle of the screen), so the image stays in view while the other column scrolls past. See Sticky columns.
- In the other column, add a Custom Heading for the title and one or more Text Block elements for the story.
- On each of them, set Scroll Reveal to By word. Because they share a column, they fill in one after the other as one text.
- Use large type and enough text to scroll for a while. The fill-in follows the text's own height, so a longer story takes more scrolling to finish.
Shortcode
Scroll Reveal is added to the Custom Heading (vc_custom_heading) and Text Block (vc_column_text) shortcodes as two attributes:
[vc_custom_heading text="We started with one chair and a good pair of scissors." font_container="tag:h2|text_align:left" hb_scroll_reveal="words" hb_scroll_reveal_opacity="0.15"][vc_column_text hb_scroll_reveal="words"]<p>Today the studio has six chairs and the same rule: take the time.</p>[/vc_column_text]Use words or letters for hb_scroll_reveal. Leave the attribute out for no Scroll Reveal.