⚡️ HTML Hyperdrive ⚡️
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 = ;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 = document htmlElms;app;
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;var htmlElms = ... ;var config = ... ;var app = 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 driftesc
: zoom out of zoomed in view