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:
- 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
- full-width background video
- scroll triggered events
- background audio
- pop-up menus
- sticky scroll
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.
|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|
|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|
|blur effect||blur.js or vague.js or foggy.js||meteor-blur or vague.js or foggy.js|
|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 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.