Getting started with examples

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.

Slider

A slider needs a single stage, a layer and one frame for each slide. Controls can be placed on a second overlapping layer. Controls are regular links that link to specific frames or use special links like "#!next" or "#!prev"

Sample code

<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>

Try below: swipe or click arrows

Zoom UI

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.

Sample code

<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">
            ... content frame 1 ...
          </div>
          <div lj-type="frame" lj-name="frame2">
            ... content frame 2 ...
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Try below: swipe or click thumbs

Parallax

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 created the parallax effect.

Sample code

<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">
      ... content ...
    </div>
  </div>
</div>

Try below: scroll to see the parallax

Side menu

A layer can be used to create a menu floating on top of the regular content. The menu can be opened and closed using layerJS transitions between two or more frames representing the open and closed state.

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-default-frame="frame1">
    <div lj-type="frame" lj-name="frame1">
      ... page content ...
    </div>
  </div>
  <div lj-type="layer" lj-name="menulayer">
    <div lj-type="frame" lj-name="menu-closed">
      <a href="#menu-open">Menu</a>
    </div>
    <div lj-type="frame" lj-name="menu-open">
      <a href="#menu-closed">close</a>
      <ul class="nav-list">
        ... menu items ...
      </ul>
    </div>
  </div>
</div>

Try below: click menu to open it

Lightbox / Modal

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. This layer can be filled with a lightbox' content upon link click.

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-default-frame="frame1">
    <div lj-type="frame" lj-name="frame1">
      ... page content ...
      <a href="#box-layer.box1>click here ...</a>
    </div>
  </div>
  <div lj-type="layer" lj-default-frame="!none" lj-name="box-layer">
    <div lj-type="frame" lj-name="box1">
      ... modal content ...
    </div>
  </div>
</div>

Try below: click link to open lightbox