HTML and CSS Reference
In-Depth Information
A Practical Use Case: Scrolling with Device Movement
The typical business use for the Device Orientation API is to couple orientation hard‐
ware with Geolocation to enhance the user's actual position and direction on a given
map. But, what if you could tilt your device left or right to navigate through pages? A
flick of the wrist gets you to the next page. Or, you could deliver a continuous scrolling
slideshow based on left or right movement. I think you get the point, now let's code it.
If you combine the transition code for sliding from one page to another in
Chapter 3
with the Device Orientation API, you can create a slideshow of pages that navigate based
on which direction the device is tilted. You can find a demo of this in action at
http://
First, set up your CSS transforms for left and right movement:
var
handleOrientationEvent
=
function
(
frontToBack
,
leftToRight
,
rotateDegrees
)
{
//on each movement, we're controlling how the current focusPage moves
var
curTransform
=
new
window
.
WebKitCSSMatrix
(
window
.
getComputedStyle
(
focusPage
).
webkitTransform
);
focusPage
.
innerHTML
=
leftToRight
;
focusPage
.
style
.
webkitTransform
=
'translate3d('
+
leftToRight
*
5
+
'px, 0, 0)'
;
focusPage
.
style
.
WebkitTransition
=
'all .5s ease-out'
;
navigate
(
leftToRight
);
};
Next, perform the navigation on all the defined pages in the DOM with the single page
model from
Chapter 3
:
var
keepgoing
=
true
,
pagehistory
=
[];
var
pagestate
=
function
(
pages
,
className
)
{
var
that
=
{};
that
.
count
=
0
;
that
.
pages
=
pages
;
that
.
pageCount
=
pages
.
length
;
that
.
className
=
className
;
return
that
;
};
var
allpages
=
listToArray
(
document
.
querySelectorAll
(
'.page'
));
var
leftPageState
=
new
pagestate
(
allpages
,
'page stage-left'
);
var
rightPageState
=
new
pagestate
(
allpages
.
slice
(),
'page stage-right'
);
function
detecttilt
(
leftToRight
)
{
if
(
keepgoing
)
{
if
(
leftToRight
>
30
)
{
donav
(
leftPageState
,
rightPageState
);
}
else
if
(
leftToRight
<
−
30
)
{
