Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
images
README.md
balance3D.js
index.html

README.md

balance3D

It uses DeviceOrientationEvent (deviceorientation) and CSS 3D Transforms to balance DOM elements accoring to current device orientation

Start balancing element

balance3D(element[, options]);

Options

options = {
    perspective: pixels,
    /*
        Distance in pixels
        You can think of it as though you’re looking at the page from a such distance away
        Default: 1000
    */
    smooth: seconds
    /*
        Orientation information from device comes with jitter, smoothing will improve visual perception
        Time in seconds to smooth the animation
        Default: .3
    */
}

Examples

balance3D(document.getElementById('elm'));

balance3D(document.getElementById('elm'), { perspective: 500 });

balance3D(document.getElementById('elm'), { smooth: 1 });

balance3D(document.getElementById('elm'), { perspective: 300, smooth: .2 });

Stop balancing element(s)

Stop balancing element elm

balance3D.stop(elm)

Stop balancing all elements

balance3D.stop()
Something went wrong with that request. Please try again.