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 ,
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
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); = 'translate3d(' + Math.round(a) + 'px, ' + Math.round(b) + 'px,
' + Math.round(g) + 'px)';
}, true);
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 for quick implementations. For more information on the device
orientation specification, see . For more on iOS and
compass use, see
DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html .
there is a great example using the Webkit compass at
arcgis/help/jssamples_start.htm#jssamples/mobile_compass.html .
Search WWH ::

Custom Search