:zap: HTML Hyperdrive :zap:

Work In Progress

A utility library for creating spatial, interactive CSS3D experiences.

Usage

See the example/index.js file for reference.

HTML Hyperdrive renders HML (Hyperdrive Markup Language), which is just HTML as a string with some configuration...

eg:

var HTMLHyperDrive = require('html-hyperdrive');
var htmlElms = [
  {
    style: {
      height: '400px',
      width: '300px',
    },
    html: '<h1>Title</h1>'
  },
  {
    style: {
      height: '400px',
      width: '300px',
      boxSizing: 'border-box',
    },
    html: '<h2>Sub Title</h2>'
  },
  {
    style: {
      height: '600px',
      width: '800px',
    },
    html: '<p>Body <img src="lol.jpg" /></p>'
  }
];

var app = new HTMLHyperDrive(document.getElementById('container'), htmlElms);
app.startScene();

will render 3 stream elements with the provided styles (write in JS syntax), and markup.

Configuration

optionally, you can pass a config object as the 3rd parameter as so

var container = document.getElementById( ... );
var htmlElms = { ... };
var config = { ... };
var app = new HTMLHyperDrive(container, htmlElms, config);

Key | Description :------- | :---------- moveSpeed | Speed for "automove". Default is 3 xRange | The range of possible x values (affects how close/far elements are from each other) zDepth | The z depth of the total cluster of elements. zoomInCb | Callback fired when an element is clicked and "zoomed" into. Will callback with the obj as first parameter. zoomOutCb | Callback fired when body is clicked from "zoomed" state and return to all elements. mountCb | Callback fired when an element is initially rendered into DOM. Will callback with the obj as first parameter.

Controls:

• s : start/stop auto drift
• esc : zoom out of zoomed in view