A Campus Divided

An editorial feature for close readings of archival documents

WhenJune, 2019

RoleFront end developer

TeamDesigner – Livia Foldes
Curator – Riv-Ellen Prell

hometop

Background

A digital exhibit and archive with timely themes

Frame

Historic documents expose a shocking history
This online exhibit and archive exposed blatantly racist and antisemitic University policies through the 1930s and ‘40s to a wide audience through a curated selection of documents: letters, meeting agendas, pamphlets, newspaper articles, and so on.

I was brought in to build an interactive feature that would add important context to the archival documents. The goal was to highlight a series of passages and pair them with explanatory captions.

Challenge

Creating an interactive feature that adjusts with dynamic content


Tricky requirements
The project had several needs:
Highlighted content had to be dynamic
No restrictions on caption length
Easily editable within Wordpress
Storytelling driven by user’s scrolling

Solution

Building custom relationships between images, text, and screen size


Customizing a JavaScript library
I implemented a ‘scrollytelling’ library called ScrollMagic.js, but it required some custom Javascript work to accommodate the dynamic content. 
First, the code adjusted the reader’s scrolling speed and image overlays based on the document’s height.
Next, the code made space for the caption based on its length.

This created a dynamic relationship between the size of the image, the amount of text written about it, and the size of the reader’s screen. And it all had to work seamlessly for mobile, too.

Conclusion

An effective interactive editorial feature that brings historical documents to life