Tilt your device to reveal... more content, parts of an image, or just 'more'
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE.markdown
README.markdown
bower.json
demo.html
demo.png
jquery.tilttoreveal.js
jquery.tilttoreveal.min.js
tilttoreveal.jquery.json

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)