Hello, world!
DOM Element
The behave3d lib attaches pieces of code called 'controllers' to the HTML elements. These pieces of code:
- update the elements' properties (like
style.transform
for 3D transformations) on every browser frame, - receive 'messages' (i.e. commands) from the outside,
- and fire 'events' (not the same as DOM events) notifying the outside and other controllers.
Some controllers are not passively waiting for messages, but also set DOM-event listeners and produce a piece of automatic behavior for the element (for example, scaling up the element upon focus, then scaling it back down upon losing focus).
Applying 3D transformations and animations can be as simple as this:
- Include .js files defining the behave3d engine and each of the controllers to be used.
- Add
attributes to the elements, defining the controllers.
- Call
Behave3d.updatePool()
to tell the engine to scan the DOM tree and activate the found controllers. - Dynamically add controllers at any time by calling
Behave3d("dom_element_id").add("controller(params)")
.
The behave3d engine manages the scene, moving the 3D view-point together with the browser's viewport, and makes sure the controllers apply as little stylesheet changes as possible, avoiding repeated setting of the same transforms.