This page contains a few possible techniques for your story in Assignment3.

Flipping Pages

You could transition between parts of the story just by scrolling the page, but we'd like to see a little more.

In my example, I wrapped each “page” as a <section> and to get between pages, I changed their display (between values none ↔ block), as well as animating their position (the top or left property) and their opacity.

My base CSS included a fragment like this for the basic setup, with jQuery .css and .animate taking over after that.

main {
  height: ...;
  width: ...;
  position: relative;
  overflow: hidden;
}
main>section {
  display: none;
  padding: 1em;
  position: absolute;
}

Animations and Movement

In order to move things around your story, you need to have a containing element styled position: relative and have the moving elements themselves position: absolute.

Then you can use the left, right, top, and bottom properties to indicate where an element should be within the container. You can either set these properties or animate them.

Images

You can set the image source with code like .attr('src', 'nextimg.png').

You can also set or animate their width and height (and position as described above).

Repetition

A call like setTimeout(func, 2000) can be used to say “in two seconds call the function func()” (or other function or delay). You can use that to create a repeated animation, either moving back and forth (animating position), or flipping images like this:

show1 = function() {
  $('#theimage').attr('src', 'frame1.png')
  setTimeout(show2, 1000)
}
show2 = function() {
  $('#theimage').attr('src', 'frame2.png')
  setTimeout(show1, 1000)
}

Form Values

You can capture input from a form field whenever it changes by listening for the .change event.

input_update = function() {
  name = $('#name').val()
  ...
}
setup = function() {
  ...
  $('#name').change(input_update)
}