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. is a lean, open-source UX composition library for modern Websites and Webapps. It let’s you create UX effects like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zooms with one simple universal concept using one single library. layerJS javascript 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. Nested stages (white) and frames (red) to build a site with a floating menu and an included image slider. 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 <html> <head><script src=" "></script><link href=" " type="text/css" rel="stylesheet" /></head> https://cdn.layerjs.org/libs/layerjs/layerjs-0.4.1.js https://cdn.layerjs.org/libs/layerjs/layerjs-0.4.1.css <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><script>layerJS.init();</script></body> </html> This results in a simple slider which you can later fill in your content and style with CSS. Checkout this to play around with the example JSbin The router supports two modes: 1. Static Router The static router allows you to add absolute urls that are connected to states, a list indicating which frames are active in which stages. layerJS.router.addStaticRoute("/frame1",["frame1"]) will add a static route that will transition to frame1 if a link to “/frame1” is clicked. More complex scenarios are possible layerJS.router.addStaticRoute("/awesome",["stage1.layer1.frame2","stage2.layer2.frame6"]) will trigger transitions in layer1 and layer2 if the user goes to /awesome 2. Hash router 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. Transition Parameters 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. Please check out and the layerJS for more. Let us know what you think at or or . layerJS Wiki developers@layerjs.org Facebook Twitter
