# Introduction #
[![Join the chat at https://gitter.im/layerJS/layerJS](https://badges.gitter.im/layerJS/layerJS.svg)](https://gitter.im/layerJS/layerJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[layerJS.org](https://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](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](http://layerjs.org/examples.html).
Check out the [Wiki](https://github.com/layerJS/layerJS/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](https://github.com/layerJS/layerJS/issues). 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 [developers@layerjs.org](mailto:developers@layerjs.org) 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](https://github.com/layerJS/layerJS/blob/master/CONTRIBUTING.md)
[Learn more about Harmony agreements.](http://harmonyagreements.org)
没有合适的资源?快使用搜索试试~ 我知道了~
layerJS-最新版下载
共325个文件
js:100个
html:92个
jpg:24个
需积分: 5 2 下载量 60 浏览量
2023-05-24
10:46:40
上传
评论
收藏 11.21MB ZIP 举报
温馨提示
layerJS.org是一个开源的 Javascript UI/UX 库,可为 Web 应用程序和网站提供直观、视觉强烈、类似于移动应用程序的体验。 UX 模式,如菜单、滑块、图层和灯箱、视差效果、页面滑动、缩放效果等,实际上只是交互式动画图层。layerJS 提供了一个简单的通用概念来在纯 HTML 中创建此类模式:Stage-Frame 概念。框架是包含您的内容的容器,例如子页面、屏幕、菜单窗格、灯箱、卡片、幻灯片等。舞台是框架内容动态适应的视口。根 Stage 通常是浏览器窗口,其 Frames 代表子页面或应用程序屏幕。可以使用滑动、淡入淡出等动画过渡在舞台内交换帧。阶段和框架可以嵌套,因此在应用程序屏幕(框架)中可以存在包含一组幻灯片(框架)的滑块(阶段)。舞台可以有一个或多个具有不同帧的重叠层, layerJS 的概念类似于材料设计的原则。特别是,layerJS 的框架是材料设计中的纸张/表面。阶段是定义表面布局和主要运动的便捷方式。使用阶段,用户界面的动画过渡可以简单地定义为下一步应该在哪个阶段显示哪个帧。
资源推荐
资源详情
资源评论
收起资源包目录
layerJS-最新版下载 (325个子文件)
index.cmd 274B
index.cmd 227B
scripts.cmd 214B
index.cmd 83B
compressed.cmd 72B
scripts.cmd 61B
compressed 334B
bootstrap.css 143KB
jasmine.css 19KB
your-style.css 8KB
normalize.css 8KB
style.css 6KB
explain.css 5KB
your-style.css 2KB
layerjs.css 1KB
your-style.css 1KB
your-style.css 1KB
your-style.css 1019B
icomoon-style.css 920B
your-style.css 894B
hljs.css 832B
your-style.css 702B
your-style.css 624B
your-style.css 615B
your-style.css 595B
your-style.css 588B
your-style.css 588B
stylesheet.css 543B
your-style.css 434B
.DS_Store 6KB
glyphicons-halflings-regular.eot 20KB
icomoon.eot 2KB
vermont_diaries.gif 565KB
.gitignore 134B
.hgignore 66B
.hgtags 165B
index.html 44KB
index.html 25KB
index.html 14KB
index.html 12KB
index.html 7KB
native_scrolling_anchor.html 6KB
non_native_scrolling_anchor.html 6KB
scrolling2.html 5KB
index.html 4KB
canvaslayoutfittoheight.html 4KB
canvaslayout.html 4KB
canvaslayoutfittowidth.html 4KB
canvaslayout.html 4KB
slidelayout.html 4KB
canvaslayout.html 4KB
index.html 4KB
index.html 3KB
resize.html 3KB
index.html 3KB
index.html 3KB
index.html 3KB
index.html 3KB
index.html 3KB
second.html 3KB
scrolling.html 3KB
native_scrolling -Bug.html 3KB
native_scrolling.html 3KB
index.html 3KB
simple.html 3KB
simpleexample.html 3KB
index.html 2KB
slidelayout.html 2KB
slidelayoutfittoheight.html 2KB
non_native_scrolling.html 2KB
slidelayoutfittowidth.html 2KB
mutationobserver.html 2KB
index.html 2KB
timer.html 2KB
delay.html 2KB
index.html 2KB
fitto_css.html 2KB
fitto_elastic-height-shiftY.html 2KB
fitto_elastic-height-scale.html 2KB
fitto_elastic-width-scale_and_shiftY_bigger_stage.html 2KB
fitto_elastic-width-scale_and_shiftY_smaller_stage.html 2KB
fitto_elastic-height-scale_and_shiftY.html 2KB
fitto_elastic-width-scale_and_shiftX.html 2KB
fitto_elastic-width-scale.html 2KB
fitto_elastic-width-shiftX.html 2KB
fitto_elastic-width-scale_and_shiftX_smaller_stage.html 2KB
fitto_elastic-width-scale_and_shiftX_bigger_stage.html 2KB
fitto_responsive-height.html 2KB
fitto_responsive-width.html 2KB
fitto_responsive.html 2KB
fitto_contain.html 2KB
fitto_height.html 2KB
fitto_fixed.html 2KB
fitto_width.html 2KB
fitto_cover_scrollY.html 2KB
fitto_cover_scrollX.html 2KB
resize.html 2KB
gesturemanager.html 2KB
slide_to_canvas.html 2KB
canvas_to_slide.html 1KB
共 325 条
- 1
- 2
- 3
- 4
资源评论
陈书予
- 粉丝: 2w+
- 资源: 20
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功