Tell me a story.

An Interactive Story

In this assignment, you will create an interactive story using HTML, CSS, and JavaScript.

You have see how to do a bunch of things with JavaScript and jQuery:

• change an element's styling (e.g. .attr('class', 'newclass'))
• animate an element's style (e.g. .animate({'top': '4em', 'height': '3em'}))
• add and remove elements from the page (.append() and .remove())

These ideas can be combined to have some fun and create an animated/interactive story on a single HTML page.

I have put together an example story. Once again, I'll present it by video: if I show you the actual page, you can see the code that goes with it.

Possible Techniques

I have provided a A3 story skeleton to get you started flipping pages of the story in a simple way.

There are many techniques you can use to create visual effects, and you are certainly free to explore the tools you have seen. Also see A3 techniques and ideas.

Requirements

• A story with at least four parts (in one HTML page) with JavaScript code transitioning between the content.
• An image created by you (or modified significantly) with an image editor (possibly GIMP or Inkscape), which is incorporated into the story.
• Some repeating animation (done with JavaScript, not an animated GIF or similar).
• Page transitions that are more interesting than the provided skeleton: some kind animation that adds visually to the story.
• The story should be fun should be visually interesting.

You may not use any JavaScript libraries (besides jQuery) for this. We want to see you assemble the story yourself. You may not use Raphaël: this assignment is about manipulating HTML and CSS with jQuery.

You are not required to use a form input like in the example video (but you may if you wish).

Submitting

Upload all of your files (HTML, CSS, JS, images) to an assignment3 folder in your public_html. Find your site on the web server and make sure everything is still working

Submit the URL of your HTML page to the CourSys activity Assignment 3. We will find the rest of your story by navigating from there.