These slides: http://goo.gl/R4NRbx
- tinmagpie.com : we tell stories with code
- rachelnabors.com : more projects
- rachelnabors.com/training : training!
- @rachelnabors : show me what you make
Building an interactive storybook in HTML5
with Rachel Nabors
RachelNabors.com
@RachelNabors
Write an article for Adobe's Inspire zine that will:
And get paid to tell a story. (Much harder than it seems.)
This isn't Alice. Illustration by John Tenniel
Disney's Alice Illustration by Mary Blair
Burton's Alice
American McGee's Alice
Quin Rose's Alice
The world doesn't need another blonde and/or blue Alice.
For reals.
The Real Alice (Liddell) c. 1862
Our Alice, just a curious little girl
Alice's Sister, Denise
The whitest rabbit you know
The Park
The Hole
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.
Time for a real storyboard.
The final Alice in Videoland “storybook”.
I took the
“Big Graphics,
Big Compression” approach.
Because I know my use case.
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
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() }); };
$.waypoints('viewportHeight')
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:
Assume someone turns their iPad. All that math for nothing!
Not so!
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-position
s on Alice's sprite.
It's not “mobile.”
It's “touch.”
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:
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.
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:
.page
iscutToWonderland()
) 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); } // ... }
People tell stories. Plural.
In web development, every story has many authors.
Text #storytelling 5 Brilliant! to 504-229-6828
Do eet.
Thank you!
CSS 4EVAH!
These slides: http://goo.gl/R4NRbx
/
#