-
Notifications
You must be signed in to change notification settings - Fork 0
/
parallax.html
78 lines (60 loc) · 3.72 KB
/
parallax.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="tvbarthel : android | open source | developers | parallax" />
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>tvbarthel</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/tvbarthel">View on GitHub</a>
<h1 id="project_title"><a href="index.html">TVBarthel Organisation</a></h1>
<h2 id="project_tagline">Android Enthusiasts | Open Source Believers | Cheerful Developers</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>
<a name="android" class="anchor" href="#parallax"><span class="octicon octicon-link"></span></a>Parallax attempt : a small attempt to perform parallax effect</h1>
<img src="images/parallax.png" alt="parallax banner">
<p>This project is a first attempt to perform parallax effect. Considered it as a proof concept since no effort has been made to support multiple screen sizes | orientations and different device sensors. </p>
<p> Motions are based on Accelerometer as almost every Android-powered handset and table has an accelerometer. Moreover, according to the official documentation, <a href="http://developer.android.com/guide/topics/sensors/sensors_motion.html#sensors-motion-accel">"it uses about 10 times less power than the other motion sensors"</a>. For us, low power consumption is essential for animated layout.
<p>In order to provide "smooth rendering", we have implemented low-pass filter to reduce noise and added a custom Animator to evaluate parallax translation between two sensor values.<p>
<p>The images used for this demo are entirely based on the 404 GitHub page which has already been designed for a parallax experiment based on mouse motion.</p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/KyNBZLzWxYI" frameborder="0" allowfullscreen></iframe>
<p>Check out our github page to see our progress and how to use it : <a href="https://github.com/tvbarthel/ParallaxSampleGitHub">Parallax Attempt on GitHub</a>.
</br>
</br>
<h2>Discuss and share ideas on our small Parallax Attempt</h2>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'tvbarthel'; // required: replace example with your forum shortname
var disqus_identifier = 'parallax_thread';
var disqus_title = 'Parallax Attempt';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
<h3><a href="index.html">Back to home</a></h3>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>