Web Doc Requirements and Tech Possibilities

As you know, I’ve been researching technology for the Secret History web doc. As I start to explore possibilities, I made a list of requirements. Here are the kinds of elements I can image wanting:

chris ware - rothschild

  • full-width video
  • full-width stills
  • sound loops
  • overlaid text including titles
  • formatted text
  • parallax images
  • animated objects
  • popup and linked overlays, including video, text, photos, interactive elements

Technically, I’ll be needing the following features:

  • infinite scrolling
  • parallax
  • full-width background video
  • scroll triggered events
  • background audio
  • pop-up menus
  • overlays
  • sticky scroll

I’ve been looking at different NodeJS frameworks and seeing for which ones I might be able to find JavaScript libraries that offer some of these features. My search has suggested two strong candidates: SocketStream suggested by the Hollow developers and Meteor, a popular and well-received framework.

It seems like SocketStream, though a fullstack framework, has a more open modular structure. Meteor appears to be more monolithic and inflexible, though it has lots of support and packages developed for it.  While I appreciate the more open-ended philosophy of SocketStream which I think will pay off in flexibility as I get further along, being a novice with JavaScript and node.js, I can imagine spending endless hours integrating particular features.

Some of the tech solutions below are so well-matched to what I need, that if they are unavailable or difficult to implement in a given framework I may have to go elsewhere. However, most look like they are jQuery modules and would work with almost anything.

Matching Tech to Features

I start matching up possibility of technologies to features.

Feature SocketStream Meteor Notes
full-width video bigvideo.js or videobg.js  or vide.js bigvideo.js or videobg.js or vide-meteor HTML5, failbacks, loop. autoplay, poster fallback for mobile devices; bigvideo.js plays silent video
full-width stills bigvideo.js or videobg.js  or vide.js bigvideo.js or videobg.js  or vide-meteor
sound loops ion.sound or jplayer ion.sound or jplayer Also doesn’t autoplay on mobile devices.
popup and linked overlays overlay.js overlay.js Interactive, images, video, text, and external pages
formatted text bootstrap-wysiwyg bootstrap-wysiwyg
parallax images ScrollMagic.js or FullPage.js Meteor-ScrollMagic or FullPage.js
animated objects ScrollMagic.js or FullPage.js Meteor-ScrollMagic or FullPage.js
scroll triggered events ScrollMagic.js or FullPage.js Meteor-ScrollMagic or FullPage.js
pop-up menus overlay.js ?? This is part of jQueryTools which doesn’t have a Meteor package
sticky scroll ScrollMagic.js or FullPage.js Meteor-ScrollMagic or FullPage.js
hide scrollbar jQuery jQuery
blur effect  blur.js or vague.js or foggy.js  meteor-blur or vague.js or foggy.js
infinite scrolling
segmentation Segmenting shots and sequences on page
content management Creating, managing, sequencing content


I should say a word about ScrollMagic. If it lives up to the promise of its demo, I’m a fan. It is a port of Scrollorama of which I earlier failed to find an available version. Its ideas of simple scroll triggered events combined with dozens of effects opens up all sorts of possibilities of me. It could be the solution for parallax, animations, sound and video control, pop-up overlays, and sticky scrolling. Here is a decent article/tutorial on the ScrollMagic plugin.

Another option for this is FullPage.js.

Infinite Scrolling

Infinite scrolling is the technique of adding new content when one reaches the end of already loaded content. You can think of these as different “pages” that are appended one by one to the end of the current page.

Another method is to simply load everything near the beginning, a single long page that one scrolls through. For some of the transition effects I want, this may be the way that I’ll have to go.

On the other hand, loading everything at once disallows the possibility of meandering paths. Or perhaps some combination is possible.

sequence scrolling diagram





Leave a Reply