Annie Hoch-South white icon with cursive initials flowing to print font
Annie Hoch-South black icon with cursive initials flowing to print font

13 Ways of Looking at a Blackbird

Summary


My take on Wallace Steven's poem, "13 Ways of Looking at a Blackbird", incorporates dynamic, moving elements to reimagine standard poetry. The project begins with the author's biography hidden, which unlocks when the user "collects" or types in the missing word, "blackbird", in each stanza.


Background


I've always been a fan of finding new ways to make things more visually interesting and engaging. This project is one of the first websites that I created with that specific intention. Originally, this website was like any other standard website- static image, boring text. I wanted to revisit my original blackbird site and really see where I could push myself and create not just a website, but also a visual story.

This project was the resulting final for my course, DTC 477: Advanced Multimedia Authoring. This four-month long course further developed my coding skills, including responsive design for mobile.

Challenges


This project used a Javascript library called Skrollr by Prinzhorn to achieve that paralax scrolling effect. Having never worked with a Javascript library before, it was a challenge to learn how libraries work and the specific nuances within this library. However, I was excited to imagine what something like Skrollr could bring to the table, and I wanted to step outside my comfort zone and try something completely new.

In addition to working with a new library, I wanted to find a way to give the poem some replay value, just to make things a bit more visually interesting and add incentive to go back through the poem again.

Solutions


When I began working on this paralax scrolling project, I found it helpful to research other websites that also used the same library. I learned that Skrollr works by mapping positions in the scroll height and assigning your CSS values to them. Essentially, if I wanted to make an image fade in, linger, then fade out, I would need three data points in my scroll height. For the fade in, it would need to start with 0 opacity, then assign a later data point to have 1 (or full) opacity. From here, I could have the value linger as long as I want, so long as I record the data point when the effect should begin the fade out. The last data point would be when I actually assign the 0 opacity again for it to fade out. In a sense, it works similar to keyframes in Adobe Premiere or After Effects.

I wanted to add a secret at the end of the poem to entice users to want to go through the poem again. I decided to do this with a hidden author's biography. The poem starts out with missing blanks for each time "blackbird" appears in the stanzas. There are instructions on the splash page that tell the user to use the spacebar to enter "blackbird", thus revealing the true poem. If a single blank is left unfilled, the biography remains hidden and a prompt at the bottom allows users to scroll back to the top. If the site reloads, there is additional script for stanzas three and ten to randomize their leaves and flock values, to mix things up.

Results


The end result takes what would have been a static poem on a page and brings it to life. We follow the blackbird through the story as it glides from stanza to stanza. This course both honors the author's original intentions, while reimagining poetry and digital storytelling.

This project helped me improve my overall coding skills, while being able to express my own creativity.

visit website