Loading repository data…
Loading repository data…
BNOTIONS / repository
Scenery.js is a Javascript tool that helps make it simpler to do interesting things on a web page as it scrolls
Scenery.js is a Javascript tool that helps make it simpler to do interesting things on a web page as it scrolls
kinda like these sites
The scenery.js Javascript tool was developed while investigating our uses of the web and web browsers, and trying to determine successful techniques around what makes websites 'cool', 'memorable', 'hot', or any other positive adjectives.
We have come a long way from the early days of the web, which was assembled as a tool to help transmit documents electronically from point A to point B.
We have moved well into an era of 'web applications', a period which has seen an expansion of the utility of web browsers from a tool for document retrieval, to becoming a tool that you can operate your life from (checking email, scheduling meetings, going shopping, preparing invoices, doing your accounting, booking horse rentals).
Along the way, some clever individuals have also managed to create some cool experiences within the web browser. They have created websites that are a joy to browse. They have created web applications that are fun to interact with. They have created web experiences that we tell others about. Dazzling, clever, unique, surprising experiences.
In assessing these scenarios, however, it quickly comes to light that a great deal of work went into making this happen.
"Make it do that thing" can generally translate into weeks of effort.
To that degree, scenery.js has emerged with the hopes of being a helpful tool to allow designers to be free to tackle some interesting experiences related to the scrollbar, and equip developers with some familiarity with HTML, CSS, and Javascript with a reliable tool to make these implementations easier.
The scenery.js has two main options for implementing a 'film strip'-esque metaphor to your web browser experience.
The operative component in this scenario is the scrollbar.
In both scenarios, the scroll grip acts as a 'playhead' and the scroll track acts as the 'timeline'.
In case you are unclear regarding Scrollbar slang, check out the Wikipedia article to get the parts straight: http://en.wikipedia.org/wiki/Scrollbar.
The first option allows you to control the size of your document (and the relative height of the scroll grip), and determine a number of 'scenes' that will be included in your web page.
To indicate a 'scene' in the DOM, a class is appended to the body tag (OR the tag of your choice), which you can then use as a trigger for changes of state in your CSS, or to run some CSS animations.
The second option allows you to get the scroll position (represented as a percentage of completion), and map that number on to the CSS properties of various DOM elements.
At this time, the library supports mapping to the following CSS properties:
Currently, this library depends on:
At minimum, this library requires a DOM element that will act as the 'Stage' for your movie.
A few of the initial prototypes have led the developers to recognize that this may not be necessary over time, but it is in the current iteration of this library.
To instantiate your 'Movie', call the Scenery() function, setting any of the following optional parameters (with the defaults indicated in this example):
var scenery = new Scenery();
The Scenery() function supports the following configurations:
var movie = new Scenery({
scenes: 7,
scene_length: 'window',
stage_ele: '#stage',
scene_mgr: 'body'
main_ele: '#main_content'
});
To create a new instance of an element that is mapped to the scroll grip, call the Thread() function as indicated:
var thread = new Thread();
var thread = new Thread({
element: '#block_1', // DOM Element to animate
property: 'top', // CSS Property to adjust
prop_start: -50, // Starting Value of CSS property
prop_end: 0, // End Value of CSS property
unit: '%', // CSS Unit of measurement - use '' if the value does not require a unit
timeline_start: 0, // Position on timeline to begin animation (%)
timeline_end: 100 // Position on timeline to end animation (%)
});
scenery.js has been tested and is performant in the following browsers:
Over time, it is expected that hooks to make concessions for mobile and antique browsers will be made
Things we are looking to cover next: