Animated Story
Enhanced Storytelling Project Description
For your Animated Story project, you should pick a song, poem, data set, or very short story to illustrate with one web page. Examples that would be appropriate are Jabberwocky or the song Yellow Submarine by the Beatles. The choice is up to you, just be sure that the language is visual enough to allow you some room to illustrate the story with movement, colors, images and typography.
This assignment is meant to allow you a little freedom to think about how to use what you've learned to tell a story. In order to do this, you will need to get used to using CSS to style many elements on a page and make extensive use of class and id selectors. You should also make use of all of the text and color properties you've learned so far as well as the @font-face property to use a variety of typefaces.
This project is in the style of a single serving website: it's a single page designed to do one thing. It should stand on its own. Because of this, you do not need to worry about navigation or other normal elements of a website. This is more of a demonstration page than an actual website.
Example Student Projects
Here are some previous student projects using the Storytelling approach. These are generally examples of A level work.
- The Tale of Robin Hood
- anyone lived in a pretty how town
- A Letter to the Girl I Used to Be
- There's a fork in the road
- Dreams
- Scary Story
- An Unexpected Encounter
- The Little Prince
- Monks
- October
These two projects incorporate less scrolling effects but are still interesting.
- Banana Pancakes (The pancake scrolling uses skrollr)
- Snow White (The falling apple uses skrollr)
Scrolling Animation with Skrollr
Using the JavaScript library "skrollr" created by Alexander Prinzhorn, you can make a page that allows elements to move around as you scroll the browser window. This is the same type effect used in the New York Times story Tomato Can Blues. Careful use of the Skrollr library animation scrolling effects can help you tell your story on the page.
This project can easily become overwhelming if you start out with complex ideas or a very long story. Start small and expand as you gain confidence. The best projects are not necessarily the most complex, but the ones that have been carefully thought out and designed.
Resources for Using Skrollr
Skrollr might seem overwhelming at first, but if you break down each animation into individual parts, it will seem more manageable.
Simple Example
Here is a very loosely paraphrased version of Alice in Wonderland falling down the rabbit hole.
In this example, there are really only three scenes to illustrate.
Down the Rabbit Hole Demo
Down the Rabbit Hole is a simple animation created with the help of skrollr. Below is a link to a description of the animation for each element in Down the Rabbit Hole.
Submitting your project
The completed project is due November 12. Be prepared to spend about five minutes demonstrating and talking about your project in class that day.
You will have a few additional days (11/15) to complete the Postmortem section of the midterm page (see below for description).
Your project should work on Google Chrome (using whatever versions are installed in the labs). Make sure to test your animation in this browser.
You should upload your final files to your Simmons web space and make a link your project from your story.html page. Make sure it's clearly labeled so that I can find it. Your animated story page should serve as a project description and process book for the project.
Your story.html page should contain the following information:
- A description of the project
- An explanation of your chosen text. Include the actual text and attributions to your selection.
- Your storyboard [due 10/29]
- A list linking to each of your project assets (completed images) [due 10/29]
- A clearly labeled link to your finished project
- Postmortem [Due: 11/15]
- What were you trying to accomplish?
- Did you succeed?
- Which parts did you struggle with?
- How was this project different from other web pieces you've worked on?
Grading Criteria
| Description | Points |
|---|---|
| Technical use of Skrollr / CSS Properties | 10 |
| Effectiveness of storytelling Have you created a visual language and added substantially to the words of your chosen piece. |
20 |
| Visuals and typography are consistent throughout piece (they can be different but should still lend towards a visual cohesion) | 5 |
animated story project page (story.html). All pieces should be complete and accessible from your class website |
15 |