Storytelling with Scrolling Map Background

For a recent project, we were helping a group from the Environmental Sciences department translate some of their academic research on a particular type of bird into a more general narrative targeted towards a general audience.

As a part of this process, we wanted to create a section of our companion site that illustrates the annual migration pattern of the Prothonotary Warbler. The migration is important because of the wide range the birds travel, starting in the North American south and ending in the Panamanian mangroves during winter.

In preparation for our part of the work, we looked at other examples of compelling digital storytelling and found a lot of great examples at The Pudding. Most of their most polished pieces use an interesting sticky scrolling pattern, where the screen is split into equal parts and as the user scrolls through textual explanations a corresponding data visualization of some kind is updated based on the user’s position.

Matt worked up some great mockups that we were using to build out our interactive components, and his mockup used a full screen background that outlines this migration pattern. After looking at this, it seemed like we should be able to make this interactive in the same way The Pudding does using some simple map libraries.

I based my code in part on the examples describing the usage of the Scrollama JS library and found everything pretty intuitive. There isn’t anything super fancy here with the code, so you can check that out in the embedded code pen below, but I figured this was worth writing about because it seems like an interesting take on an already popular pattern in digital storytelling.

See the Pen Scroll Map Background by Jeff Everhart (@JEverhart383) on CodePen.

If you liked this content, I can deliver stuff like this straight to your inbox without being spammy.

Get Tech Tips to Your Inbox

* indicates required

Leave a Reply

Your email address will not be published. Required fields are marked *