The HTML 5 Holiday Card:
Notes:
- jQuery is the framework
- All of the elements are divs, animated with a spritesheet in a background image
- Loading image sequences was very cumbersome, with too many browser requests, especailly on mobile. There may be a way to request multiple images simultaneously.
- Animations were done in Lightwave > Swift3D > Flash. Spritesheets were created with SpritesheetSWF by Keith Peters: http://www.bit-101.com/blog/?p=2939
- Positioning each element absolutely by manually writing CSS is tedious - (for example, placing and aligning the shadow of each element) - could something WYSIWYG like Adobe Edge or Dreamweaver be worth the effort here?
- Multiple-frame svgs or svgz's seem like a possibility once Firefox and IE reliably support them
- The string between the lights is a canvas element
- Would all elements animate more smoothly if they were rendered directly on canvas instead of within divs?
- An animated intro starts jQuery animations at various frame numbers
- The mobile version removes the plane and robot elements to improve performance
- Elements are made draggable depending on whether the broswer is mobile or not
- Each elements position, velocity, frame number, and z-index is modified every frame
- Collisions are checked between all elements
- This seems especially processor-intensive on mobile
- A background gradient provided visual depth
- Performance was by far the best on Chrome. This may carry over to Android once Chrome becomes the default Android browser.
