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.
The post Storytelling with Scrolling Map Background appeared first on Jeff Everhart.
John Stewart asked if I had any easy ways to allow users to highlight some text and push that highlighted text to a form. I didn’t but that sounded like something useful in a variety of scenarios so I sketched out a working demo in Codepen which you can see below. It can push the content directly to a form field on the page but I also built a link that would populate to include the highlighted text as a URL parameter and grab the page URL as well.
Like most things I make, it’s the result of some Stack Overflow responses being hit several times with a hammer. It’s decently commented up but is not the most optimized of code.
This type of construction usually results in new ideas being incorporated on the fly and that makes for ugly code. I am ok with that as this prototype took about 15 minutes to create. We can polish things up if/when we have a more direct audience/intent. Until then, it’s a functional prototype which can be used to get faculty seeing possibilities.
See the Pen highlight to field by Tom (@twwoodward) on CodePen.