Write an article for Adobe's Inspire zine that will:

• inspire Adobe's vast creative community to think about using the browser to tell stories.
• explore popular techniques and find their weaknesses.
• compare creating an iPad experience alongside desktop.

And get paid to tell a story. (Much harder than it seems.)

• Crafting a browser-first story
• Retina and images
• Handling a shifting environment with modernizr
• Loading assets
• Parallax
• Reconciling touch with click

Alice was beginning to get very bored, sitting by her sister in the park. Her sister was deeply engrossed in a technical book about web development.

“How can she read a book with no pictures or dialog in it?” Alice wondered to herself.

She was just about to nod off when suddenly a white rabbit wearing a vintage tweed porkpie hat dashed by… looking anxiously at his smartphone!

And so on. To see the full copy, try printing the page.

• Tell a small piece of the story well.
  No time for telling the whole thing.
• Must work on Chrome and iPad Retina.
  Favor speed and pageweight over compatibility
• Interaction must be fairly one-to-one.
  Don't create two different yet parallel experiences.
• Prefer to use jQuery plugins.
  More accessible to designers.
• Must. Meet. Deadline.
  Jettison the things that prevent meeting these goals.

• Perfect for flat color images
• Made in Illustrator, even the sprites.
• Optimize with SVG Optimizer or automated SVG Cleaner

• Perfect for images with mottled colors.
• Compression is your friend again.
• Compress with JPEG mini.
• Caution: It looks terrible with red colors.

• The only option for images with transparent portions.
• Make the best of it with ImageOptim and ImageAlpha
• Could have used multiple sizes as my target browsers only download images referenced in CSS that match their media queries.

• Automate PNG and JPG compression with ImageOptim-CLI
• Use Sass Animation Studio to build sprite animations.

The load screen disappears after $(window).load().

All the scenes must remain hidden while the page's images load and DOM renders.

load() will fire without display: none's background images.

But opacity: 0 elements background images must be downloaded to fire load().

.loading .scene {
  opacity: 0;
}

Follow along at cdpn.io/modpi

• The height is animated to “roll the screen up”.
• The cup and saucer use custom cubic beziers on their animations to add bounce.

My Twitter friend Kevin Lozandier reminded me about jQuery Waypoints

$(element).waypoint(function() {
  doSomething();
}, { offset: someNumber });  // of pixels from the top

Only works with visible things.

We can assume that if a page is of equal distance from top as from bottom, it's being read.

var beingRead = function() {
  var $screenHeight = $.waypoints('viewportHeight');
  var $pageHeight = $(".page").height();
  var offset = ($pageHeight - $screenHeight) / 2 * -1;

  return offset;
}

// fired when rabbit hole is clicked
var downTheHole = function() {
  $tunnel.find(".page").waypoint(function() {
    $(this).addClass("in-view");
    // more stuff...
  }, {
    offset: beingRead()
  });
};

• Handy screen height calculator: $.waypoints('viewportHeight')
• Sweet sticky elements shortcut (as used on Alice in the tunnel).

There's a lot of math being done, and all of it relies on measuring visible elements. You'll have to re/take these measurements whenever:

• the browser window is resized
• content is revealed
• device orientation changes

Assume someone turns their iPad. All that math for nothing!

var recalcWaypoints = function() {
  $(".page").waypoint({
    offset: beingRead()
  });
}

window.addEventListener('orientationchange', recalcWaypoints);

I used skrollr.js.

Follow along at cdpn.io/AeEHw

I put the following into downTheHole():

// calculate the height of the tunnels
var tunnelTop = Math.round($tunnel.offset().top);
var tunnelTopData = "data-" + tunnelTop;
var tunnelBottomData =  "data-" + (tunnelTop + Math.round($tunnel.height()));

$alice.waypoint('sticky') // make her sticky!
.attr(tunnelTopData, "top:0%").attr(tunnelBottomData, "top:80%");   // Give Falling Alice her skrollr measurements as data attributes

Remember calculating those waypoints?

$tunnel.find(".page").waypoint(function() {
  $(this).addClass("in-view");
  var mood = $(this).data("mood");
  $("body").removeClass().addClass(mood);
}, {
  offset: beingRead()
});

Tie those classes to different background-positions on Alice's sprite.

My original function was good.

Rodney Rehm offered up a better solution.

// To get to #tunnels, activate #tunnels
$("#to-tunnels").activate(downTheHole);

Danger! In iOS Safari, all animation and JavaScript pauses while you touch the screen.

Skrollr has a “solution” for that.

This leads to an intesting puzzle:

• Waypoints ties with scroll events
• The “mobile friendly” skrollr circumvents scroll by animating the CSS transformed page.

So either you can change Alice's mood and everything jumps or her mood doesn't change but she parallaxes fine.

An email conversation with John Polacek convinced me to take another look at hammer.js.

• Small (3kb gzipped) and standalone.
• jQuery plugin available.
• Use any gesture, including swipe.

Originally I attached it to all .pages, but…

In the land of scrolling, Waypoints is enough.

In the land of touch, it was important to:

• keep track of what the previous and next .page is
• fire some functions (like cutToWonderland()) on swipe instead of by waypoint.

So I used counters.

I was already using Modernizr to test for CSS animations/transitions support.

var cutToWonderland = function() {
  if(Modernizr.touch) {
    cutFired = true;
    currentPage = nextPage;
    calcPrevNext(currentPage);
  }
  // ...
}