HTML and CSS Reference
In-Depth Information
In some cases, this is a better technique altogether, especially if the creative is a video that looks better in
landscape or if it's a game that works better in portrait. Again, most of this will be dealt with on a case-by-case basis,
so be sure to take your own creative in consideration and instruct your clients before development.
Gyroscope, Compass, and Accelerometer
Since you've just learned about the orientation of mobile devices, let's take it a step further and discuss the gyroscope,
compass, and accelerometer. Each of these APIs can give your ad creative rich enhancements by tying directly into
device features. A good example of how this API can be used in an ad experience is found at
http://bit.ly/OAf8BX
,
where it takes advantage of the accelerometer API as well as the Canvas to provide the user a mazelike experience.
In order to take advantage of these cool features, you'll need to learn a bit about the
deviceorientation
spec.
The device orientation API outlines how the DOM will listen for specific events—such as
deviceorientation
,
compassneedscalibration
, and
devicemotion
—to tap into via our ad's JavaScript. Look at the code in Listing 8-16 to
see how to work with this API.
Listing 8-16.
Accelerometer/Gyroscope Example
<script>
var ad = document.querySelector('#ad');
window.addEventListener("deviceorientation", function(event) {
// process
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
console.log('Alpha : ' + a + ' Beta : ' + b + ' Gamma : ' + g);
ad.style.webkitTransform = 'translate3d(' + Math.round(a) + 'px, ' + Math.round(b) + 'px,
' + Math.round(g) + 'px)';
}, true);
</script>
You can see that we're adding an event listener for the device orientation event, which will return an
alpha
,
beta
,
and
gamma
on the window's orientation state. So what are
alpha
,
beta
, and
gamma
? They're actually the measurement
of the rotation the device has from top to bottom, left to right, and rotating in a circular fashion (there is a more
detailed explanation in the orientation spec). Finally, take our ad element and apply a CSS3 transform on the ad unit
by calling a
translate3d
function and applying the
alpha
,
beta
, and
gamma
values to the
x
,
y
, and
z
properties of the
ad. If you're following along, you should be able to see your ad element move about the screen based on how you
change the orientation. A pretty subtle but slick effect if you ask me!
Using the accelerometer also gives access to a “shake” gesture, but since some coding is required, be sure to
check out
http://github.com/alexgibson/shake.js
for quick implementations. For more information on the device
orientation specification, see
http://dev.w3.org/geo/api/spec-source-orientation.html
. For more on iOS and
■
there is a great example using the Webkit compass at
http://help.arcgis.com/EN/webapi/javascript/
Note
