Alice in Videoland

Alice in Videoland is a storybook project using SVG, CSS3 animations, and JavaScript scroll events to loosely retell Lewis Carroll's Alice in Wonderland for a new generation.

First Edition

Originally created in 2013, the Alice in Videoland featured a number of technologies which you can check out in its own repo:

• Modernizr for feature detection and dependency loading
• jQuery for all the below...
  • Hammer.js for touch and gesture support on iOS
  • jQuery Visible to detect when elements are on screen
  • Waypoints.js executes functions when an element has been scrolled to
  • Debounced Resize() would throttle the recalculations on resize

2024 Edition

Here's what I'm using now, a decade later:

• Timeline animations to "scroll Alice down the tunnel"—includes location as well as sprite change
• CSS Snap points for scrolling down the tunnel—formerly Hammer.js
• Intersection Observer to detect when something is in the window (intersecting with the viewport)

Table of Contents

• The finished first chapter
• Talk
• Original Storyboard

License

No, you may not use any of the images. I, Rachel Lee Nabors, drew them and they are mine. You may use the code, though. Enjoy!

Running Alice

This is a very old project and it's using Compass and Ruby. So, if you want to run it...

1. Install the gems from the Gemfile
2. Run compass watch in the root directory (book)
3. Open index.html in your browser