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.
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
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)
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!
This is a very old project and it's using Compass and Ruby. So, if you want to run it...
- Install the gems from the
Gemfile - Run
compass watchin the root directory (book) - Open
index.htmlin your browser