-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (67 loc) · 3.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Movver.js • The concept of hover on touch devices</title>
<link href="gh-pages-assets/main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<section class="description">
<h1>Movver.js</h1>
<h2>Movver provides the concept of a hover on touch devices</h2>
<p>It does this by keeping a log of where you're tapping to scroll and then figures out what you're most likely looking at on the remaining viewable portion of the screen.</p>
<p>In the demo on the right you can see the portion of the screen highlighted in red where Movver thinks the user's hand is covering up the display. The green highlighted tiles are areas we've asked movver to keep a calculate focus for - lighest green being most focussed. We can then attach callbacks to these when the focus remains over a certain amount for a specified period of time.</p>
<p>Movver has many use cases:</p>
<ul>
<li>Pre-caching of content behind tappable page elements</li>
<li>Lazy loading images</li>
<li>Revealing content as it's viewed</li>
<li>Mobile analytics i.e. what are your users actually looking at?</li>
</ul>
<p>Have a play with the <a href="http://mcarter.me/movver/demo/" alt="View Demo"><span>demo</span></a> on your phone to see how it works. Download links below...</p>
<div class="links">
<div class="cta-container">
<a class="cta" href="https://github.com/michaelcarter/movver/" alt="Download Movver on GitHub"><span>Download on GitHub</span></a>
</div>
<div class="actions-container">
<iframe src="https://ghbtns.com/github-btn.html?user=michaelcarter&repo=movver&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
</div>
</section>
<section class="demo">
<h2>Demo</h2>
<div class="marvel-device iphone6 silver">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<video poster="http://i.imgur.com/HosgVw8h.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline="" style="width: 375px; height: 667px;">
<source src="http://i.imgur.com/HosgVw8.webm" type="video/webm">
<source src="http://i.imgur.com/HosgVw8.mp4" type="video/mp4">
<object style="width: 375px; height: 667px" type="application/x-shockwave-flash" data="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=http://i.imgur.com/HosgVw8.mp4&imgur_width=375&imgur_height=667&imgur_url=">
<param name="movie" value="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=http://i.imgur.com/HosgVw8.mp4&imgur_width=375&imgur_height=667">
<param name="allowscriptaccess" value="never">
<param name="flashvars" value="height=667&width=375">
<param name="width" value="375">
<param name="height" value="667">
<param name="version" value="0">
<param name="scale" value="scale">
<param name="salign" value="tl">
<param name="wmode" value="opaque">
</object>
</video>
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
<p class="note"><strong>Note:</strong> The debugging flag is turned on in the video above, the highlighted areas would not be visible in a production use case.</p>
</section>
</div>
</body>
</html>