This summer I started building a modern retelling of “Alice in Wonderland”, an interactive storybook web app by the name of Alice in Videoland . It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice’s source up on GitHub where anyone can examine my code, but sometimes it’s nice to have someone go over the reasoning with you. In this article I’ll cover some of the most technical details which neither my talk nor the Inspire article could examine in depth: Using Modernizr.js with animations to enhance graceful degradation Detecting which page is being read with jQuery Waypoints Adding scrolling parallax with Skrollr.js Overcoming scrolling issues and swiping on iPad Mapping tap to click If you’d like to learn about storyboarding, retina images, CSS animations, and other interactions, you should check out the supplemental article on Adobe Inspire. Also, before reading further, you should definitely play with the storybook itself ! A Storybook for the iPad and Chrome My goal was simple enough: make a storybook app that worked equally well in Chrome and on iOS Safari, specifically on the iPad Retina. Mind you, I wasn’t designing for a “mobile context”, I knew exactly where my target audience would be: on wifi connections, in the comfort of their own homes, either reading with their children on their laps or dissecting the code at the office
↧