- Notifications
You must be signed in to change notification settings - Fork9
Zumly is a JS library for building zooming user interfaces
License
zumerlab/zumly
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Zumly is a Javascript library for building zooming user interfaces. Create zooming experiences using web standards.
Zumly is a frontend library for creating zoomable user interfaces (ZUI). Instead of hyperlinks and windows, Zumly uses zooming as a metaphor for browsing through information. This way it offers an infinite virtual canvas in which elements can be zoomed themselves to reveal further details.
To be more flexible Zumly is primarily focused on zooming transitions without caring about visual design. Most CSS frameworks or custom designs work with Zumly.
npm install zumly# oryarn add zumlyIncludehttps://unpkg.com/zumly in your project in a<script> tag.
Download Zumly files fromunpkg.com. Files are indist folder.
- Add CSS inside
<head>tag:
<linkrel="stylesheet"href="zumly/dist/zumly.css"><!-- Or "https://unpkg.com/zumly@0.9.11/dist/zumly.css" -->
- Add Zumly as ES6 module:
<scripttype="module">importZumlyfrom"zumly/dist/zumly.mjs"// Or "https://unpkg.com/zumly@0.9.11/dist/zumly.mjs"</script>
- Add Zumly CSS Styles inside
<head>tag:
<linkrel="stylesheet"href="zumly/dist/zumly.css"><!-- Or "https://unpkg.com/zumly@0.9.11/dist/zumly.css" -->
- Add Zumly as UMD module:
<scriptsrc="zumly/dist/zumly.umd.js"></script>// Or "https://unpkg.com/zumly"
- Create a container for your Zumly app with
.zumly-canvas:
<divclass="example zumly-canvas"></div>
- Inside
scripttag write this code:
// Some viewsconsthello=`<div>H E L L O <br>W <span data-to="world">O</span> R L D!</div>`;constworld=`<div><img src="https://raw.githubusercontent.com/zumly/website/gh-pages/images/world.png"/></div>`;// Zumly instanceconstapp=newZumly({mount:'.example',initialView:'hello',views:{ hello, world}})app.init()
- See this example live atcodePen
- The Zumly instance:
constapp=newZumly({// Mount DOM Element. String. Requiredmount:'.className',// First rendered view name. String. RequiredinitialView:'viewName',// Store all views. Object. Requiredviews:{ view1, view2,...},// Customize transitions. Object. Optionaltransitions:{// Effects for background views. Array. ['blur', 'sepia', 'saturate']effects:['sepia'],// How new injected view is adapted. String. Default 'width'cover:'height',// Transition duration. String. Default '1s'duration:'1300ms',// Transition ease. String. Default 'ease-in-out'ease:'cubic-bezier(0.25,0.1,0.25,1)'},// Activate debug notifications. Boolean. Default falsedebug:true})// Initialize instanceapp.init()
- Options for each zoomable element:
- Add
z-viewclass in you view container:
<divclass="z-view"></div>
- Add
zoom-meclass to an HTML element to make it zoomable and adddata-toattribute with the name of the target view
<divclass="zoom-me"data-to="anotherView">Zoom me!</div>
- Each zooming transition can be customized by adding some
data-attributes:
<divclass="zoom-me"data-to="anotherView"data-with-duration="2s"data-with-ease="ease-in"> Zoom me!</div>
To run this project, you will need:
- Node.js >= v10.5.0
When developing you can run:
npm run dev# oryarn devThis will regenerate the build files each time a source file is changed and serve onhttp://localhost:9090
npm runtest# oryarntest
npm run build# oryarn buildPlease seeCHANGELOG for more information what has changed recently.
Zumly is on early stages of development.
- Allow different template engines. Currently Zumly only accepts string literal templates.
- Add lateral navigation for same zoom level elements.
- Add a navegation widget.
- Add programmatic navigation.
- Add preseted navigation.
- Add router.#3
- Allow recalculate zoom position on resize events.
Zumly is a new approach based on another library I made,Zircle UI
The MIT License (MIT). Please seeLicense File for more information.
About
Zumly is a JS library for building zooming user interfaces