Перемещение изображения вбок с наклоном iPad

Я безуспешно пытался создать следующий эффект и был бы очень признателен за любую помощь.

Эффект заключается в перемещении изображения слева направо в соответствии с наклоном iPad. iPad удерживается в альбомной ориентации, и изображение должно двигаться слева направо (на самом деле вверх и вниз). Ширина изображения удваивается по сравнению с рабочей областью iPad (2048 пикселей) и должна дублироваться при достижении конца окна. Может ли кто-нибудь помочь мне начать это? заранее спасибо


javascript html ipad move tilt
person Michael    schedule 01.04.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Этого должно быть достаточно для начала: http://jsfiddle.net/kennis/S9swv/

По сути, вас волнует событие «ориентация на устройство». Этот объект события дает вам несколько полезных фрагментов данных — e.alpha, e.beta и e.gamma.

Каждое свойство является мерой поворота вдоль заданной оси в диапазоне от отрицательных 180 до положительных 180.

Забавный факт: это также работает на MacBook Pro (по крайней мере, в Chrome).

person Kevin Ennis    schedule 01.04.2012
comment
Спасибо за быстрый ответ, но на самом деле это не тот эффект, который я искал. Я хотел, чтобы изображение продолжало двигаться вправо, когда iPad наклоняется вправо, и влево, когда наклоняется влево. - person Michael; 02.04.2012
comment
Ой, простите. Я думал, тебе нужна помощь, чтобы начать. Теперь я понимаю, что вы хотите, чтобы кто-то написал для вас целое приложение. Позвольте мне заняться этим... - person Kevin Ennis; 02.04.2012
comment
Нет, я не хотел, чтобы кто-то написал это для меня, я хочу попробовать сам, и то, что вы написали, помогло мне понять, как преобразовать данные вращения в горизонтальное движение. Который я смог внедрить в свое собственное решение, в котором не использовалась библиотека moo. Но я, кажется, не понимаю, как заставить его двигаться, а также ускоряться. Думаю, мне нужно больше взглянуть на некоторые физические решения и попытаться понять, как там работают функции. Спасибо за ваше время и извините, если вы не думали, что я ценю ваш ответ. - person Michael; 02.04.2012
comment
Не беспокойся. И к вашему сведению, мое решение на самом деле не использует MooTools — это просто то, что по умолчанию загружается в новый jsFiddle. - person Kevin Ennis; 02.04.2012
comment
привет, мне удалось создать следующий код, пытаясь заставить его работать (включив в него ваш код). насколько я могу судить, это должно было сработать. но это не так. я думаю может чего-то не хватает. Если бы вы могли взглянуть и сказать мне, где я ошибся, я был бы признателен. (напишу в следующем комментарии). - person Michael; 05.04.2012
comment
var elem = document.getElementById('контейнер'), power = window.outerWidth / 2; тайм-аут, гниль; function scrollDiv(e){ if(rot) { elem.style.left = (parseInt(elem.style.left, 10) + (rot * power)) + 'px'; тайм-аут = setTimeout (scrollDiv); } еще { clearTimeout (тайм-аут); } }}); обработчик функций (e) { if (rot) { rot = e.beta / 360, timeout = setTimeout (scrollDiv); } еще { clearTimeout (тайм-аут); } }}); - person Michael; 05.04.2012