Hi, iOS7 added a cool homescreen background effect that moves with the devices orientation, and it looks like a few people have been able to tap into the "deviceorientation" event using JS and CSS for modern webkits. I was curious if anyone has had any luck with it, or could offer up any advice for the below code;
HTML
<!--<div id='background'
<div id='foreground'
Content for the foreground
<
<--
CSS
#background {
margin: 0 auto;
padding-top: 100px;
height: 568px;
width: 320px;
background-image: url('background.png');
background-size: 360px 608px;
background-position: -20px -20px;
}
#foreground {
text-align: center;
padding: 20px;
background: rgba(255,255,255,0.2);
border-radius: 18px;
}
JS
var background = document.getElementByID(‘background’);
window.addEventListener('deviceorientation', function(eventData) {
// Retrieving the front/back tilting of the device and moves the
// background in the opposite way of the tilt
var yTilt = Math.round((-eventData.beta + 90) * (40/180) - 40);
// Retrieve the side to side tilting of the device and move the
// background the opposite direction.
var xTilt = Math.round(-eventData.gamma * (20/180) - 20);
// Thi 'if' statement checks if the phone is upside down and corrects
// the value that is returned.
if (xTilt > 0) {
xTilt = -xTilt;
} else if (xTilt < -40) {
xTilt = -(xTilt + 80);
}
var backgroundPositionValue = yTilt + 'px ' + xtilt + "px";
background.style.backgroundPosition = backgroundPositionValue;
}, false);
Any suggestions, thoughts, or experience is greatly welcomed.
Thanks!