Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Create beautiful, animated gradients with ease. This JS library provides you with an easy-to-use API to create and put animated gradients wherever you want on your website.

Stars: ✭ 16 (-27.27%)

Mutual labels: javascript-library

Feathersui Starling

User interface components for Starling Framework and Adobe AIR

Stars: ✭ 934 (+4145.45%)

Mutual labels: user-interface

Spotlight

Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

Stars: ✭ 799 (+3531.82%)

Mutual labels: javascript-library

Sketch

Just a HTML5 sketch-pad.

Stars: ✭ 9 (-59.09%)

Mutual labels: javascript-library

Chromesnifferplus

🔍 Sniff web framework and javascript libraries run on browsing website.

Stars: ✭ 788 (+3481.82%)

Mutual labels: javascript-library

Thread

Simply, lightweight and easy multi-thread JavaScript library

Stars: ✭ 17 (-22.73%)

Mutual labels: javascript-library

Psd Guides

📐 JS library to draw photoshop-like guides.

Stars: ✭ 22 (+0%)

Mutual labels: javascript-library

Oojs

Power for object oriented javascript libraries. This is a mirror from https://gerrit.wikimedia.org. See https://www.mediawiki.org/wiki/Developer_access for contributing.

Stars: ✭ 14 (-36.36%)

Mutual labels: javascript-library

Termynal

⬛️ Lightweight and modern terminal animations using async/await

Stars: ✭ 858 (+3800%)

Mutual labels: javascript-library

View All Similar Projects ➔

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

# or

yarn add zumly

Content delivery networks (CDN)

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

Direct download

Download Zumly files from unpkg.com. Files are in dist folder.

Setup

ES6 modules

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>

UMD modules

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"

Hello World

Create a container for your Zumly app with .zumly-canvas:

<div class="example zumly-canvas"></div>

Inside script tag 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

Zumly options

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-view class in you view container:

<div class="z-view"></div>

Add zoom-me class to an HTML element to make it zoomable and add data-to attribute 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>

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

# or

yarn dev

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

Running tests

npm run test

# or

yarn test

Building

npm run build

# or

yarn build

Changelog

Please see CHANGELOG 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

Telegram group

Original idea

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

License

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 22

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (0) 🔗