17 example of long-form online story/interactives with parallax effects and HTML5 video (Snow Fall-like)

There are just so many conferences that I wish I was going, but it is impossible to go to all of them. SABR National, SABR Analytics, AAJA, EyeO (I was lucky to go this year), SXSW (I’m going next year!) Sloan Sports Analytics Conference, Open Vis, NICAR, IEEE VIS Week, HTMLDevConf, Artifact, W3conf, Ampersand, FrontEndConf to name just a few…. and ONA is one of them.

I was unable to go to Atlanta this past week, but I follow tons of people who were there on twitter and especially one of the session really piqued my interest. Session was called “Snow Fall for all” by Adam Schweigert (of INN) and Jessica Plautz, and there is a hackpad that was contributed by attendees. There are bunch of very interesting blog posts like Lisa Williams’s write up (is excellent), Tweets wrap-up and such, but I thought it would be helpful to list all the “snowfall”-like interactives here for future reference.

There is a pattern, such as bigger photo, parallax effect, larger font size with more white space, subtle (and sometimes not so subtle) css/js animation and html5 videos (as well as technique called cinemagraph) and stuff, and each tricks are not that difficult. But the successful one is just really good old-fashioned “story telling” combines many tricks, appropriately.

Long form story telling examples

UPDATE: More links and more links

…and more links. (Send me a link of new and old or comment below and I will keep adding them to this list.)

Tool shed

As I see more cool tools, I will add it here:



I have not used them at all, so not an endorsement.

[UPDATE 1/24/2014] Came across this: Huge list of crowd-sourced list of “snowfall” like stories.

2 Responses to “17 example of long-form online story/interactives with parallax effects and HTML5 video (Snow Fall-like)”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>