Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zumerlab/zumly
Zumly is a JS library for building zooming user interfaces
https://github.com/zumerlab/zumly
javascript-library ui user-interface zoomable zooming zui
Last synced: 8 days ago
JSON representation
Zumly is a JS library for building zooming user interfaces
- Host: GitHub
- URL: https://github.com/zumerlab/zumly
- Owner: zumerlab
- License: mit
- Created: 2020-07-12T00:14:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-25T11:23:49.000Z (about 2 months ago)
- Last Synced: 2025-01-03T06:47:53.290Z (15 days ago)
- Topics: javascript-library, ui, user-interface, zoomable, zooming, zui
- Language: JavaScript
- Homepage:
- Size: 1.62 MB
- Stars: 58
- Watchers: 5
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Zumly is a Javascript library for building zooming user interfaces. Create zooming experiences using web standards.
## Overview
Zumly is a frontend library for creating zoomable user interfaces ([ZUI](https://en.wikipedia.org/wiki/Zooming_user_interface)). 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.
## Installation
### NPM
```sh
npm install zumly
# or
yarn add zumly
```
### Content delivery networks (CDN)
Include https://unpkg.com/zumly in your project in a `` tag.
### Direct download
Download Zumly files from [unpkg.com](https://unpkg.com/zumly/). Files are in `dist` folder.
## Setup
### ES6 modules
1. Add CSS inside `<head>` tag:
```html
<link rel="stylesheet" href="zumly/dist/zumly.css">
<!-- Or "https://unpkg.com/[email protected]/dist/zumly.css" -->
```
2. Add Zumly as ES6 module:
```html
<script type="module">
import Zumly from "zumly/dist/zumly.mjs"
// Or "https://unpkg.com/[email protected]/dist/zumly.mjs"
```
### UMD modules
1. Add Zumly CSS Styles inside `` tag:
```html
```
2. Add Zumly as UMD module:
```html
// Or "https://unpkg.com/zumly"
```
## Hello World
1. Create a container for your Zumly app with `.zumly-canvas`:
```html
```
2. Inside `script` tag write this code:
```js
// Some views
const hello = `
H E L L O
W O R L D!
`;
const world = `
`;
// Zumly instance
const app = new Zumly({
mount: '.example',
initialView: 'hello',
views: {
hello,
world
}
})
app.init()
```
- See this example live at [codePen](https://codepen.io/zumly/pen/gOPQovd)
### Zumly options
1. The Zumly instance:
```js
const app = new Zumly({
// Mount DOM Element. String. Required
mount: '.className',
// First rendered view name. String. Required
initialView: 'viewName',
// Store all views. Object. Required
views: {
view1,
view2,
. . .
},
// Customize transitions. Object. Optional
transitions: {
// 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 false
debug: true
})
// Initialize instance
app.init()
```
2. Options for each zoomable element:
- Add `z-view` class in you view container:
```html
```
- Add `zoom-me` class to an HTML element to make it zoomable and add `data-to` attribute with the name of the target view
```html
Zoom me!
```
- Each zooming transition can be customized by adding some `data-` attributes:
```html
Zoom me!
```
## Development
### Developer environment requirements
To run this project, you will need:
- Node.js >= v10.5.0
### Dev mode
When developing you can run:
```sh
npm run dev
# or
yarn dev
```
This will regenerate the build files each time a source file is changed and serve on http://localhost:9090
### Running tests
```sh
npm run test
# or
yarn test
```
### Building
```sh
npm run build
# or
yarn build
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
### Status: beta
Zumly is on early stages of development.
### Roadmap
- 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](https://github.com/zumly/zumly/issues/3)
- Allow recalculate zoom position on resize events.
## Stay in touch
- [Telegram group](https://t.me/ZumlyCommunity)
## Original idea
Zumly is a new approach based on another library I made, [Zircle UI](https://github.com/zircleUI/zircleUI)
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.