To use layerJS you just need to define the stages and put all content in frames. The following list gives you minimal examples for common UX patterns. Feel free to combine them to your liking.
A slider needs a single stage, a layer and one frame for each slide. Use regular links to control the slider.
The different layerJS elements are defined by the lj-type attribute. lj-default-frame will indicate which frame is shown initally in the layer. The example shows 2 frames in the layer, repesenting 2 slides.
The controls are normal HTML links that reference a specific frame (e.g. #frame1) or use special names like #slider.!next or #slider.!prev which indicate the next or previous frame of the layer slider.
<div lj-type="stage">
<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="#slider.!prev">previous</a>
<a href="#slider.!next">next</a></pre>Zooming patterns, as often found in mobile apps, can be created with the "canvas" layout. Here, frames have fixed positions on the "canvas" and can be scaled or rotated. During transitions, the canvas is transformed (moved, scaled, rotated) such that the active frame fits into the stage.
For this example we need 2 nested stages. The layers in both stages use the canvaslayout.
In the outer stage there are 2 frames, which are positioned and sized such that one frame defines the zoomed out view and the other frame defines a view zoomed in on the left most thumbnail. The positioning is done in CSS.
The nested stage is inside the zoomed in frame of the outer structure. It contains one frame for each thumbnail. These frames are also positioned in CSS, one next to the other with a gap between them.
The zoom interaction is simply linking between the zoomin and zoomout frame. There is a link on top of the thumbnails and, in the zoomed in state, there is a floating button (also a link) that will zoom out again.
Thumbnail frames itself have gestures defined using lj-neighbors.* attributes. These link from each frame to the next and preivous frames and are triggered through left/right swipes on touchscreens or touchpads.
The thumbnail frames do not actually contain thumbnails but really the whole subpage (iframes in the example). When they are zoomed out there is a transparent overerlay (a link) on top of them, but when they are zoomed in, they are fully functional.
<div lj-type="stage">
<div lj-type="layer" lj-layout="canvas">
<div lj-type="frame" lj-name="zoomout">
... Headline and intro ...
</div>
<div lj-type="frame" lj-name="zoomin">
<div lj-type="stage">
<div lj-type="layer" lj-layout="canvas">
<div lj-type="frame" lj-name="frame1" lj-neighbors.r="frame2">
... content frame 1 ...
</div>
<div lj-type="frame" lj-name="frame2">
... content frame 2 ...
</div>
...
</div>
</div>
</div>
</div>
</div>A lighbox, modal or pop-up can be easily created with a layer on top of the content which initially does not show a frame.
Within the top stage, a popup layer needs to be created on top of the content layer. This layer contains a frame which contains the content of the popup.
The lj-default-frame needs to be !none in order to not show the popup at the beginning. Using a regular link with the frame name of the popup (e.g. href="#popup") the popup can be shown. Using href="#popup-layer.!none" the popup can be hidden again.
You can definitely place more frames into the popup layer if you need more different popups in you site. You can open and close them as indicated above.
<div lj-type="stage">
<div lj-type="layer" lj-default-frame="frame1">
<div lj-type="frame" lj-name="frame1">
... page content ...
<a href="#popup">click here ...</a>
</div>
</div>
<div lj-type="layer" lj-default-frame="!none" lj-name="popup-layer">
<div lj-type="frame" lj-name="popup">
... modal content ...
</div>
</div>
</div>A collapsible can be created very similar to a slider. It has only one frame inside the stage/layer and can alternate between showing that frame and not showing it.
The stage needs to have the attribute lj-auto-height="true"in order to adapt its height to the height of the frame. If no frame is shown, the stage height will become 0. With lj-default-frame="!none" the stage will be collapsed by default.
Use the special links href="#collapse-layer.!toggle", href="#collapse-layer.!none" and href="#collapse-layer.!next" to toggle, collapse or extend the collapsible.
<a href="#lcollapse.!toggle">toggle</a>
<div lj-type="stage" lj-auto-height="true">
<div id="collapse-layer" lj-type="layer" lj-transition="none">
<div lj-type="frame" lj-fit-to="responsive-width">
<a href="#lcollapse.!none">close</a>
</div>
</div>
</div>A layer can be used to create a menu floating on top of the regular content. Using two frames you can have an open and a closed state of the menu.
We again create a stage on the top level an put a layer for our main content in it. On top of that layer create another layer for the menu (menulayer).
Then create 2 frames, one for the closed state (containing hamburger icon) and one for the open state which should open as a side menu. The closed menu gets lj-fit-to="responsive-width" to make the menu fill the full width, the side menu should attach to the left side and gets lj-fit-to="responsive-height" and its width will be set in CSS.
The closed menu should fade in and out which is instructed by lj-transition="fade" while the side menu should swipe in from left which is set by lj-transition="right".
The transitions can be triggered either by links (e.g. href="#sidemenu" or by gestures using lj-neighbors.*.
<div lj-type="stage">
<div lj-type="layer">
<div lj-type="frame" lj-name="frame1">
... page content ...
</div>
</div>
<div lj-type="layer" lj-name="menulayer">
<div lj-type="frame" lj-name="closed" lj-fit-to="responsive-width" lj-transition="fade">
<a href="#sidemenu">Menu</a>
</div>
<div lj-type="frame" lj-name="sidemenu" lj-fit-to="responsive-height" lj-transition="right">
<a href="#closed">close</a>
<ul class="nav-list">
... menu items ...
</ul>
</div>
</div>
</div>Parallax effects can be created with two overlapping layers in a stage. If the frame in the upper layer is longer than the stage, it will scroll within the stage. Transparent areas in this frame will reveal the lower non-scrolling frame creating the parallax effect.
To create transparency it is necessary to leave the frame itself without any background color. Then put a background color to all elements that should have a background using CSS. Transparent areas should be given appropriate dimensions using CSS.
To have the background image fill the whole window using lj-fit-to="cover" on the frame containing the image.
<div lj-type="stage">
<div lj-type="layer">
<div lj-type="frame" lj-fit-to="cover">
<img src="img/background.png">
</div>
</div>
<div lj-type="layer">
<div lj-type="frame">
<p class="white">... content ...</p>
<div class="transparent"></div>
...
</div>
</div>
</div>