Scrollytelling for WordPress

Scrollytelling in WordPress, in a visual editor.

Tell a story that moves as the reader scrolls: a scene that holds while the text changes, pictures that come forward, film behind the words. Midground builds it into your own WordPress site – no code, and no separate storytelling tool.

Try it in your browser See a scroll story

No sign-up · Opens the editor with a copy of our fjord story · Free beta licence

What a scroll story is made of

Scenes in actsA Pinned scene holds the screen while its acts come and go – the classic scrollytelling step.

Pictures that moveParallax, zoom and float effects that follow the reader’s scroll, not a timer.

Film behind the wordsBackground video from your own files, YouTube or Vimeo – the last two only after consent.

Headlines with an entranceWords that rise one by one, or come into focus as the reader arrives.

Maps and embedsMaps from OpenStreetMap, and a Custom HTML element for charts from the tool you already use.

Readable for everyoneReaders who prefer less motion get a calm page, and every release is checked with axe-core.

See them work together in How deep is a Norwegian fjord?, a scroll story built in Midground. Learn each one step by step: a pinned scene in steps · layers at real depth · reveal a heading word by word.

On your own site

A story is an ordinary WordPress page.

Hosted storytelling tools such as Shorthand make beautiful stories – in a separate editor, priced per month. With Midground, a story is a WordPress page like any other: on your domain, with your SEO plugin and your hosting, made in the same editor as the rest of your site.

Your pages keep working if you stop paying – the licence is for updates and support.

For stories that deserve more than a wall of text

Long reads and features
Annual reports and impact stories
Product launches
Campaign and event pages
Portfolios and case studies

How a story comes together

1 Write the storyStart with the words. Each part of the story becomes a section.

2 Hold the key sceneTurn a section into a Pinned scene: the picture stays while the text changes.

3 Add depth, sparinglyGive a few pictures parallax and the big headlines a reveal.

4 Check it on a phoneChange or turn off any effect for phones, and preview every screen size.

Questions

Do I need to know code?

No. Everything is set in the visual editor. You can add your own CSS or HTML, but you never have to.

Will search engines read my story?

Yes. A Midground page is a WordPress page with real text, so search engines read it and your SEO plugin works as usual.

Can readers who prefer less motion still read it?

Yes. Visitors who ask their device for less motion get a calm version of the page automatically.

Can I add charts?

Yes. Paste the embed code from your chart tool into a Custom HTML element, or use pictures.

Open a scroll story in the editor – in your browser.

The editor opens with a full copy of a demo site, in your browser. When you want it on your own site, the beta licence is free.

Try it in your browser Free beta licence