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
# or
yarn add zumlyInclude https://unpkg.com/zumly in your project in a <script> tag.
Download Zumly files from unpkg.com. Files are in dist folder.
- Add CSS inside
<head>tag:
<link rel="stylesheet" href="zumly/dist/zumly.css">
<!-- Or "https://unpkg.com/[email protected]/dist/zumly.css" -->- Add Zumly as ES6 module:
<script type="module">
import Zumly from "zumly/dist/zumly.mjs"
// Or "https://unpkg.com/[email protected]/dist/zumly.mjs"
</script>- Add Zumly CSS Styles inside
<head>tag:
<link rel="stylesheet" href="zumly/dist/zumly.css">
<!-- Or "https://unpkg.com/[email protected]/dist/zumly.css" -->- Add Zumly as UMD module:
<script src="zumly/dist/zumly.umd.js"></script>
// Or "https://unpkg.com/zumly"- Create a container for your Zumly app with
.zumly-canvas:
<div class="example zumly-canvas"></div>- Inside
scripttag write this code:
// Some views
const hello = `
<div class="z-view">
H E L L O <br>
W <span class="zoom-me" data-to="world">O</span> R L D!
</div>
`;
const world = `
<div class="z-view">
<img src="https://raw.githubusercontent.com/zumly/website/gh-pages/images/world.png"/>
</div>
`;
// Zumly instance
const app = new Zumly({
mount: '.example',
initialView: 'hello',
views: {
hello,
world
}
})
app.init()- See this example live at codePen
- The Zumly instance:
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()- Options for each zoomable element:
- Add
z-viewclass in you view container:
<div class="z-view"></div>- Add
zoom-meclass to an HTML element to make it zoomable and adddata-toattribute with the name of the target view
<div class="zoom-me" data-to="anotherView">Zoom me!</div>- Each zooming transition can be customized by adding some
data-attributes:
<div class="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
# or
yarn devThis will regenerate the build files each time a source file is changed and serve on http://localhost:9090
npm run test
# or
yarn testnpm run build
# or
yarn buildPlease see CHANGELOG 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 see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent