Dynamic modifications in a UI are not arbitrary but follow clear patterns:
- interfaces mostly consist of HTML fragments (screens/pages, menus, popups, cards, slides, etc.) which are itself static.
- in response to user interaction those fragments are shown, hidden, swapped, moved or transformed — mostly in an animated way.
layerJS introduces the Stage-Frame concept. Frames are arbitrary HTML fragments - just DIVs containing the content of your site - that can be fit into Stages (also DIVs serving as viewports) dynamically. The root Stage is usually the browser window and its Frames represent sub pages or app screens. Frames can be exchanged within Stages using animated transitions like swipes, fades or 3D transitions. Frames can be placed on overlapping layers allowing effects like floating menus or parallax backgrounds.
layerJS supports directional touch and touchpad gestures to trigger transitions. Use your fingers to pull down menus or swipe through a list of sub pages. Transitions can further be triggered through API calls or above mentioned links.
- The Stage-Frame concept
- layerJS Attribute Reference
- Fitting & Scrolling
layerJS can be included into your site from our CDN. Simply include the following tags into the head of your HTML document.
<script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.min.js"></script> <link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.css" type="text/css" rel="stylesheet" />
If you would like to use the libraries locally, download them from the above urls and link them locally in your HTML.
In layerJS you will define stages, layers and frames simply by adding HTML-attributes to
<div>s. Here is an example structure:
<div lj-type="stage"> <div lj-type="layer"> <div lj-type="frame" > … your HTML code … </div> </div> </div>
The following example HTML document will create a slider that can be controlled by two links at the bottom:
<html> <head> <script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.min.js"></script> <link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.css" type="text/css" rel="stylesheet" /> </head> <body> <div lj-type="stage" style="width:100%; height:500px"> <div lj-type="layer" lj-default-frame="frame1"> <div lj-type="frame" lj-name="frame1"> ... content of frame 1 ... </div> <div lj-type="frame" lj-name="frame2"> ... content of frame 2 ... </div> </div> </div> <a href="#frame1">Frame 1</a> <a href="#frame2">Frame 2</a> </body> </html>
The example first includes the library from our CDN, then a structure of two frames inside a single stage with
height:500px is defined. This becomes the slider. Below that to links are included that link to
#frame2 which will trigger transitions to frame1 and frame2, respectively.
How to build
Please note: building layerJS is not required to use it. Simply use our CDN versions.
Building layerjs requires nodejs and npm. Necessary node packages can be installed by following these simple instructions:
Open a console/command line (for example: command prompt (CMD) or Terminal). Install mercurial (if you haven't already) and clone the repository with the following command:
hg clone https://bitbucket.org/layerjs/layerjs
you can also use other programs like Sourcetree to clone the directory. The latest development version may have issues. In this case download one of the releases.
Navigate to the layerJS folder:
Enter the command:
and press Enter.
At the end of the installation, in order to start the build process,
enter the command:
npm run build
which automatically runs all unit tests via
npm test. The result can be found in the
You can now explore the examples in the ./examples directory.
Issues, bug reports and feature requests
If you experience any issues or bugs using layerJS or you would like to request features, please let us now through bitbucket issue tracking. This issue tracker is open to everyone so we encourage discussion on all issues.
How to contribute
Contributions to layerJS are more than welcome. Get in touch with us at email@example.com and discuss your ideas. You can also fork the repository and start building.
layerJS uses a contribution agreement to be able to republish code under future licenses if necessary: layerJS contribution agreement