Project Details
Web Design | November 2018
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. I wanted to see where I could push myself and create not just a website, but also a visual story.
My Role
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.
Project Summary
The goal was to create an engaging website, using what I learned from my course. The animated scrolling elements were edited in Illustrator and placed using coded keyframes. In addition, the site takes user input and if done correctly, unlocks a short author's biography. The result is a beautiful, engaging website that has users returning to a truly unique experience.
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.