#Tilter v1.0
###Add mobile accelerometer tilt-viewing to images on your website (like on Facebook)
Tilter is a jQuery plugin that let's you reveal image overflow using the tilt functionality on a mobile device. It's designed to:
-
- item 1
-
- item 2
Check out the demo page, browse examples or read the documentation to get started.
Aside from jQuery make sure you have loaded the Greensock Animation Plattform (TweenMax). Tilter has been tested on Jquery version 1.11 and GSAP TweenLite version 1.14.2;
To use ScrollMagic in your project simply include the plugin js file.
<script type="text/javascript" src="js/jquery.tilter.js"></script>For deployment use the minified version instead:
<script type="text/javascript" src="js/jquery.tilter.min.js"></script>##Usage Tilter can be used on images inside of any container div with a set height and style overflow:hidden, assuming the image width is greater than the width of the container element (when full height). The image will be given the height of the container, and center aligned initially.
###Note
- Any "margin-left" or "left" rule applied to the image in your CSS will be overridden. If you have any "margin-left" or "left" rules with "!important" applied to the image the plugin won't work.
##To-Do
- Add styles using JS
- Clean up functions and variables
- Make fully responsive
- Adjust rotation axis with device orientation change
- Create documentation and examples
It's not at all what I would consider "ready for market", but if you're interested in helping make this really great, or have ideas, please join.
##Acknowledgements
- Thank you to ScrollMagic for use of your lovely README Formatting, and to ...