Tilt your device to reveal... more content, parts of an image, or just 'more'
JavaScript
Latest commit 463fd04 May 21, 2014 @martinkr added bower support
Permalink
Failed to load latest commit information.
LICENSE.markdown v1.0.0 Feb 19, 2014
README.markdown Update README.markdown Mar 25, 2014
bower.json added bower support May 21, 2014
demo.html new demo Mar 27, 2014
demo.png demo Mar 25, 2014
jquery.tilttoreveal.js demo Mar 25, 2014
jquery.tilttoreveal.min.js 1.0.1 Feb 19, 2014
tilttoreveal.jquery.json new demo Mar 27, 2014

README.markdown

jQuery.tiltToReveal

jQuery.tiltToReveal - Tilt your device to reveal... more content, parts of an image, or just 'more' . jQuery.tiltToReveal supports two different modes:

  • treshold based: as soons as the user tilts the device above the treshold angle the animation starts and runs the whole distance
  • percentage based: until the user tilts the device to the maximum angle the elements are animated. If the maximum angle is reached, the whole distance has been animated

Example

API

    jQuery('.fx--tiltToReveal').tiltToReveal({
        useTreshold: {BOOLEAN - indicate if you want to use the threshold or the percentage variation},
        // set the options for left/right tilting
        leftright: {
            distance: {NUMBER - the maximum distance to go in pixel},
            treshold: {NUMBER - the angle the device have to be tilted before the treshold based animation is triggered},
            maxAngle: {NUMBER - the maximum angle for the percentage based animation. This angle equals 100% - the maximum distance to go}
        },
        // set the options for front/back tilting
        frontback: {
            distance: {NUMBER - the maximum distance to go in pixel},
            treshold: {NUMBER - the angle the device have to be tilted before the treshold based animation is triggered},
            maxAngle: {NUMBER - the maximum angle for the percentage based animation. This angle equals 100% - the maximum distance to go}
        },
        // set the animation properties
        animation : {
            duration: {NUMBER - the maximum duration for the css transition},
            easing: {String - easing for the css transition, eg 'linear'},
        }
    });

Example

    jQuery(document).ready(function(){
        jQuery('.fx--tiltToReveal').tiltToReveal({});
    })

Requires

License

Dual licensed under the MIT and GPL licenses.

Copyright (c) 2014 Martin Krause (martinkr.github.io)