Layerjs

layerJS: Javascript UI composition framework
Alternatives To Layerjs
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Hamburgers6,8973176018 days ago20March 15, 202233mitSCSS
Tasty CSS-animated Hamburgers
Boommenu5,761
a year ago117Java
A menu which can ... BOOM! - Android
Awesomemenu5,100
115 years ago2March 24, 201522otherObjective-C
Path 2.0 menu using CoreAnimation :)
Side Menu.android5,005
273 years ago1February 04, 201518apache-2.0Java
Side menu with some categories to choose.
React Burger Menu4,8629401153 months ago134May 23, 20227mitJavaScript
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
Context Menu.android3,740
1242 years ago8May 25, 20165apache-2.0Kotlin
You can easily add awesome animated context menu to your app.
Persei3,249
103 years ago8October 26, 20171mitSwift
Animated top menu for UITableView / UICollectionView / UIScrollView written in Swift
Circle Menu3,149
253 years ago25October 22, 20189mitSwift
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion - https://www.ramotion.com/agency/app-development/
Androidviewhover3,1412915 years ago5May 23, 201519Java
An elegant way to show your menu or messages.
Guillotinemenu2,812
93 years ago6October 22, 2018mitSwift
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Alternatives To Layerjs
Select To Compare


Alternative Project Comparisons
Readme

Introduction

Join the chat at https://gitter.im/layerJS/layerJS

layerJS.org is an open source Javascript UI/UX library allowing intuitive, visually intense, mobile app-like experiences for web apps and websites.

UX patterns like menus, sliders, layers & light boxes, parallax effects, page-swipes, zoom effects, etc. are really just interactive animated layers. layerJS provides one simple universal concept to create such patterns in pure HTML: the Stage-Frame concept. Frames are containers that contain your content, e.g. sub pages, screens, menu panes, lightboxes, cards, slides, etc. Stages are viewports into which the frame content is dynamically fit. The root Stage is usually the browser window and its Frames represent sub pages or app screens. Frames can be exchanged within Stages using animated transitions like swipes, fades. Stages and Frames can be nested, so in an app screen(frame) a slider(stage) can exist which contains a set of slides (frames). Stages can have one or more overlapping layers with different frames, allowing effects like floating menus or parallax backgrounds.

layerJS concept resembles the principles of material design. In particular, layerJS frames are the papers/surfaces in material design. The stages are a convenient way to define the layout and the principal movements of the surfaces. With stages, animated transitions of the user interface can simply be defined by which frame should be shown in which stage in the next step.

Transitions are triggered through plain HTML links which simply name the frame which should be navigated to. layerJS also supports directional touch and touchpad gestures to trigger transitions. Use your fingers to pull down menus or swipe through a list of sub pages. Transitions can also be triggered through the API.

Watch this animation on how it works: https://layerjs.org/#explain-animation

Quickstart

layerJS can be included into your site from our CDN. Simply include the following tags into the head of your HTML document.

<script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.min.js"></script>
<link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.css" type="text/css" rel="stylesheet" />

In layerJS you will define stages, layers and frames simply by adding HTML-attributes to <div>s. Here is an example structure:

<div data-lj-type="stage">
    <div data-lj-type="layer" data-lj-default-frame="main" >
        <div data-lj-type="frame" >
             your HTML code 
        </div>
    </div>
</div>

Find examples and live demos on our project website layerjs.org.

Check out the Wiki for more details.

Issues, bug reports and feature requests

If you experience any issues or bugs using layerJS or you would like to request features, please let us know through bitbucket issue tracking. This issue tracker is open to everyone so we encourage discussion on all issues.

How to contribute

Contributions to layerJS are more than welcome. Get in touch with us at [email protected] and discuss your ideas. You can also fork the repository and start building.

layerJS uses a contribution agreement to be able to republish code under future licenses if necessary: layerJS contribution agreement

Learn more about Harmony agreements.

Popular Animation Projects
Popular Menu Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Html5
Animation
Menu
Navigation
Transition
Animated
Swipe
Menus
Parallax