3

I've been trying to create the following effect with no success and would really appreciate any help given

The effect is moving an image from left to right according to the iPad tilt. The iPad is held in landscape view and the image should move from left to right (actually it is up and down). The image width is doubled the iPad stage (2048px) and should duplicate itsefe when reaching the end of the window. Can some one help me to start this? Thanks in advance

Michael
  • 73
  • 1
  • 9

1 Answers1

2

This should be enough to get you started: http://jsfiddle.net/kennis/S9swv/

Basically, what you care about is the 'deviceorientation' event. That event object gives you a few useful pieces of data -- e.alpha, e.beta, and e.gamma.

Each property is a measure of rotation along the given axis, ranging from negative 180 to positive 180.

Fun fact: This also works on MacBook Pros (in Chrome, at least).

Kevin Ennis
  • 14,226
  • 2
  • 43
  • 44
  • Thank you for your quick answer but is is not really the effect I was looking for. I wanted the image to keep flowing to the right when the iPad is tilted to the right and to the left when tilted to the left. – Michael Apr 01 '12 at 21:06
  • Oh, I'm sorry. I thought you wanted some help getting started. I now realize that you want someone to write an entire application for you. Let me go get on that... – Kevin Ennis Apr 01 '12 at 21:15
  • No I didnt want some one to write it for me i want to try it myself and what you wrote did help me to understand how to convert the rotation data to horizontal movement. Which I was able to implant on my own solution which didn't use the moo lib. But I don't seem to get the way to make it keep moving and also accelerate. I guess I need to look more at some physics solutions and try and understand the how the functions there work. Thank you for your time and sorry if you didnt think I appreciate your answer. – Michael Apr 02 '12 at 05:16
  • No worries. And FYI, my solution doesn't actually use MooTools -- that's just what gets loaded by default on a new jsFiddle. – Kevin Ennis Apr 02 '12 at 17:14
  • hi, I've managed to create the following code trying to make it work (incorporating your code into it). as far as i can tell it should have worked. but it does not. i think might be missing something. If you could have a look and tell me were i got wrong i would be grateful. (posting it in the next comment). – Michael Apr 04 '12 at 20:10
  • var elem = document.getElementById('container'), power = window.outerWidth / 2; timeout, rot; function scrollDiv(e){ if(rot) { elem.style.left = (parseInt(elem.style.left, 10) + (rot * power)) + 'px'; timeout = setTimeout(scrollDiv); } else { clearTimeout(timeout); } }}); function handler(e){ if(rot) { rot = e.beta / 360, timeout = setTimeout(scrollDiv); } else { clearTimeout(timeout); } }}); – Michael Apr 04 '12 at 20:13