-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathparallax.html
178 lines (175 loc) · 6.1 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Glitch</title>
<style type="text/css">
/*just for the documentation, doesn’t concern the Parallax example*/
body
{
background-color:#FFF;
color:#000;
font-family:Helvetica, Arial;
font-size:12px;
padding:50px;
}
body > div
{
width:600px;
padding:20px 0;
margin-top:30px;
}
body > div, footer
{
border-top:1px solid #000;
}
footer
{
padding-top:20px;
}
/*end documentation css*/
#parallax_wrapper
{
position:relative;
width:940px;
}
#parallax_field
{
overflow:hidden;
position:absolute;
left:0;
top:0;
height:370px;
width:100%;
}
#parallax_bg
{
position:absolute;
top:-20px;
left:-20px;
width:110%;
height:425px;
}
#parallax_illustration
{
display:block;
margin:0 auto;
width:940px;
height:370px;
position:relative;
overflow:hidden;
}
#parallax_illustration img
{
position:absolute;
}
#error_text
{
top:72px;
left:72px;
}
#octocat
{
top:94px;
left:356px;
}
#speeder
{
top:150px;
left:432px;
}
#octocatshadow
{
top:297px;
left:371px;
}
#speedershadow
{
top:263px;
left:442px;
}
#building_1
{
top:73px;
left:467px;
}
#building_2
{
top:113px;
left:762px;
}
</style>
</head>
<body>
<h1>Parallax</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class Parallax <br />
<strong>Inheritance</strong> : Parallax > Object <br />
<p>A class for parallaxing based on mouse position or device orientation. The root of the parallax object would be the parent housing all the children that should be parallaxed. This object could even be the document or window if desired. You can also pass in a singular jQuery object. Along with the JavaScript instantiation, some markup is required as well to make the effect work. Any child nodes that are intended to be parallaxed should include either/both <code>data-parallax-x</code> and <code>data-parallax-y</code> attributes, which should be set as numbers representing the distance in pixels the child node will travel on that axis. Negative nubmers can be used to have a reversed parallax effect. Top and left css values are fine to have on the child nodes, as this effect uses <code>translate3d</code> to move the children.</p>
<h2>Public Properties</h2>
<ul>
<li><strong>speed</strong> : Number <br />
A number between 0 and 1 which represents the speed at which the parallax effect eases into its destination positioning. The default value is 0.2.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>Parallax</strong>(parent:Element, speed:Number = 0.2) <br />
Creates and activates a Parallax object, using the parent DOM element or jQuery object which the mouse positioning should be based on. An optional speed argument will immediately set the speed property.</li>
<li><strong>pause</strong>():* <br />
Causes the Parallax instance to temporarity cease operations.</li>
<li><strong>resume</strong>():* <br />
Resumes a paused Parallax instance’s operations.</li>
<li><strong>destroy</strong>():* <br />
Cleans up the instance when it is no longer needed.</li>
</ul>
<div>
<h2>EXAMPLE 1: BASIC PARALLAX</h2>
<div id="parallax_wrapper">
<div id="parallax_field">
<img data-parallax-x="0" data-parallax-y="-20" id="parallax_bg" src="img/field.jpg">
</div>
<div id="parallax_illustration">
<img data-parallax-x="-75" data-parallax-y="-30" id="building_2" src="img/building_2.png">
<img data-parallax-x="-50" data-parallax-y="-20" id="building_1" src="img/building_1.png">
<img data-parallax-x="10" data-parallax-y="10" id="speedershadow" src="img/speeder_shadow.png">
<img data-parallax-x="10" data-parallax-y="10" id="octocatshadow" src="img/octocat_shadow.png">
<img data-parallax-x="10" data-parallax-y="10" id="speeder" src="img/speeder.png">
<img data-parallax-x="10" data-parallax-y="10" id="octocat" src="img/octocat.png">
<img data-parallax-x="20" data-parallax-y="10" id="error_text" src="img/404.png">
</div>
</div>
<h3>Markup</h3>
<pre><code><div id="parallax_wrapper">
<div id="parallax_field">
<img data-parallax-x="0" data-parallax-y="-20" id="parallax_bg" src="img/field.jpg">
</div>
<div id="parallax_illustration">
<img data-parallax-x="-75" data-parallax-y="-30" id="building_2" src="img/building_2.png">
<img data-parallax-x="-50" data-parallax-y="-20" id="building_1" src="img/building_1.png">
<img data-parallax-x="10" data-parallax-y="10" id="speedershadow" src="img/speeder_shadow.png">
<img data-parallax-x="10" data-parallax-y="10" id="octocatshadow" src="img/octocat_shadow.png">
<img data-parallax-x="10" data-parallax-y="10" id="speeder" src="img/speeder.png">
<img data-parallax-x="10" data-parallax-y="10" id="octocat" src="img/octocat.png">
<img data-parallax-x="20" data-parallax-y="10" id="error_text" src="img/404.png">
</div>
</div></code></pre>
<h3>JavaScript</h3>
<pre><code>var parallax=new Parallax(document.getElementById("parallax_wrapper"));</code></pre>
<button id="pause">parallax.pause();</button>
<button id="resume">parallax.resume();</button>
</div>
<footer>author: Dane Hansen, <a href="mailto:dane@danehansen.com">dane@danehansen.com</a></footer>
<script src='js/danehansen/display/Parallax.js'></script>
<script>
(function(){
var parallax=new Parallax(document.getElementById("parallax_wrapper"));
document.getElementById("pause").addEventListener("click", function(evt){
parallax.pause();
});
document.getElementById("resume").addEventListener("click", function(evt){
parallax.resume();
});
})();
</script>
</body>
</html>