layerJS

UI composition & animation in pure HTML

Simply define Stages and Frames by adding attributes to HTML elements. Define the dimensions of the Stages through CSS. Layers allow overlaying Frames. Each Stage needs at least one Layer. Use HTML links to trigger transitions, e.g.

<a href="#f2">Frame 2</a>

To make everything work simply include layerJS in the head of your document. Our Sponsor KeyCDN will provide you with ultrafast server access to the library.

1
2
<script src="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.4.min.js"></script>
<link href="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.4.css" type="text/css" rel="stylesheet" /> 

Since your content will display on various screen sizes, the aspect ratios of your Stages and Frames will generally not match. layerJS offers different fitting modes, including width, height, cover, contain, responsive, responsive-width, responsive-height. Just select a mode using an HTML attribute:

<div lj-type="frame" lj-fit-to="responsive-width"></div>

Depending on the fitting mode, scrolling may occur. The initial scroll position can be any of top, left, bottom, right, center, top-center, bottom-left, etc.. This will be set with:

<div lj-type="frame" lj-start-position="top"></div>

You can disable scrolling using

<div lj-type="frame" lj-no-scrolling="true"></div>

Every Layer has an active Frame. Transitions are exchanging the current active Frame of a Layer with a target Frame using an animation. Different transition types exist, among others left, right, up, down, fade, blur, zoomin, zoomout. The active Frame can become the special "!none" Frame in which case no Frame is shown. You can specify the transition type in a link (see "Routing" section) or as Frame or Layer attribute:

<div lj-type="frame" lj-transition="left"></div>

Layouts define which Frames are shown where. The default Layout is the Slide-Layout which only shows the active Frame fitted into the Stage. During a transition the current Frame and the target FRame are shown. See the Layouts sections in the Wiki.

Interstage transitions allow sending Frames across Layers and Stages. This allows for example to "zoom" a Frame from a grid to fullscreen.

Alternative to controlling layerJS by HTML attributes (lj-* or data-lj-*) you can also use custom CSS properties. The advantage is that you can make the behaviour itself responsive by using media queries.

#menu {
  width: 100px;
  --lj-fit-to: responsive-height;
  --lj-transition: left;
}
@media (max-width: 640px) {
  #menu {
    --lj-fit-to: responsive;
    --lj-transition: fade;
  }
}

The above example will modify the fitting mode and the transition type of a frame with id menu for screens smaller than 640px.

You can use any layerJS attribute also in CSS except lj-type, lj-name. You can mix CSS properties and HTML attributes, in which case CSS properties will precede.

Using a standard HTML link you can trigger transitions. The link should contain a '#' followed by the Frame name or id. This will make the Frame the active Frame in the containing Layer.

<a href="#f1&p=right&t=1s"></a>

There exist special Frames like !none, !next, !prev. You will need to specify a Layer id or name in order to use them:

<a href="#sliderlayer.!next"></a>

<a href="#otherlayer.f1"></a>

The State of the UI defines which Frames are in which Layers (and hence in which Stages) and which Frames are active. The State is represented by an array of paths:

stage.contentlayer.home stage.menulayer.leftmenu
stage.popuplayer.!none

<a href="#contentlayer.f2;menulayer.!none"></a>

Transitions change the State. The State will be represented by the URL. When you transition from 'f1' to 'f2' the URL will change:

https://domain.com#f1 --> https://domain.com#f2

<div lj-type="layer" id="menulayer" lj-default-frame="!none"></div>

Gestures can trigger transitions. This includes touch gestures and swipes on the touchpad. There exist 4 directions left, right, up, down. Those directional gestures will trigger transitons to frames that are specified in the neigbor property of the Frame.

<div lj-type="frame" id="f2" lj-neighbors.l="f1" lj-neighbors.r="f3"></div>