layerJS is the framework for creating animated interactive web UIs in pure HTML. Now it is possible to trigger frame transitions through HTML links. No coding required.
layerJS introduces the Stage-Frame-Concept. All elements of your site or app are placed into frames. Stages are containers into which frames can be dynamically positioned using various animated transition.
The structure and interactions of your site are completely defined in HTML by marking up different blocks as frames or stages. To dynamically switch active frames in a stage so far the layerJS API had to be called.
With the 0.3 release, frame transitions can also be triggered simply through links. This allows you to define the full interactivity of your user interface in HTML without coding.
The following example is a simple content slider. Two buttons below the slider contain links, that will trigger frame transitions in the slider
<link href="https://cdn.layerjs.org/libs/layerjs/layerjs-0.4.1.css" type="text/css" rel="stylesheet" />
<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 lj-type="frame" lj-name="frame2">
... content of frame 2 ...
<a href="#frame1">Frame 1</a>
<a href="#frame2">Frame 2</a>
This results in a simple slider which you can later fill in your content and style with CSS. Checkout this JSbin to play around with the example
The router supports two modes:
The static router allows you to add absolute urls that are connected to states, a list indicating which frames are active in which stages.
will add a static route that will transition to frame1 if a link to “/frame1” is clicked. More complex scenarios are possible
will trigger transitions in layer1 and layer2 if the user goes to /awesome
The hash router works without initialization. It will trigger a transition to the frame given after the hash (#) symbol in a links url. A link to “#frame1” will trigger a transition to frame1 in what ever stage/layer this frame is in.
Both, the static router and the hash router can be used together.
By appending parameters to your links you can define how the transitions are animated. Currently the transition duration and the transition type can be defined:
t - transition duration (add ‘s’ for seconds or ‘ms’ for miliseconds)
p - transition type (fade, left, right, up, down)
using the link
<a href="#frame1?p=right&t=4s">Frame 1</a>
in our example from above will let the transition back to frame1 move in the opposite direction and slower.
Create your free account to unlock your custom reading experience.