Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Zumly is a JS library for building zooming user interfaces

License

NotificationsYou must be signed in to change notification settings

zumerlab/zumly

Repository files navigation

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). 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

npm install zumly# oryarn add zumly

Content delivery networks (CDN)

Includehttps://unpkg.com/zumly in your project in a<script> tag.

Direct download

Download Zumly files fromunpkg.com. Files are indist folder.

Setup

ES6 modules

  1. Add CSS inside<head> tag:
<linkrel="stylesheet"href="zumly/dist/zumly.css"><!-- Or "https://unpkg.com/zumly@0.9.11/dist/zumly.css" -->
  1. Add Zumly as ES6 module:
<scripttype="module">importZumlyfrom"zumly/dist/zumly.mjs"// Or "https://unpkg.com/zumly@0.9.11/dist/zumly.mjs"</script>

UMD modules

  1. 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" -->
  1. Add Zumly as UMD module:
<scriptsrc="zumly/dist/zumly.umd.js"></script>// Or "https://unpkg.com/zumly"

Hello World

  1. Create a container for your Zumly app with.zumly-canvas:
<divclass="example zumly-canvas"></div>
  1. Insidescript tag 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()

Zumly options

  1. 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()
  1. Options for each zoomable element:
  • Addz-view class in you view container:
<divclass="z-view"></div>
  • Addzoom-me class to an HTML element to make it zoomable and adddata-to attribute with the name of the target view
<divclass="zoom-me"data-to="anotherView">Zoom me!</div>
  • Each zooming transition can be customized by adding somedata- attributes:
<divclass="zoom-me"data-to="anotherView"data-with-duration="2s"data-with-ease="ease-in">  Zoom me!</div>

Development

Developer environment requirements

To run this project, you will need:

  • Node.js >= v10.5.0

Dev mode

When developing you can run:

npm run dev# oryarn dev

This will regenerate the build files each time a source file is changed and serve onhttp://localhost:9090

Running tests

npm runtest# oryarntest

Building

npm run build# oryarn build

Changelog

Please seeCHANGELOG 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
  • Allow recalculate zoom position on resize events.

Stay in touch

Original idea

Zumly is a new approach based on another library I made,Zircle UI

License

The MIT License (MIT). Please seeLicense File for more information.


[8]ページ先頭

©2009-2025 Movatter.jp