forked from stolksdorf/Parallaxjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (180 loc) · 8.57 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
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<html>
<head>
<script type="text/javascript" src="demo/libs/jq.js"></script>
<link rel="Stylesheet" type="text/css" href="demo/libs/xo.css" />
<script type="text/javascript" src="parallax.min.js"></script>
<script type="text/javascript" src="demo/index.js"></script>
<script type="text/javascript" src="demo/examples.js"></script>
<link rel="Stylesheet" type="text/css" href="demo/index.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34546066-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="background">
<div class="container">
<div id="index" class="leaguegothic white page">
<div id="titlebox" class="f2 lghtgrey">
<div class="f5 white">Parallax.js</div>
The swankiest Javascript framework for elegantly sliding pages and parallaxing backgrounds. It'll make your monocle drop.
<iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="155px" height="30px"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=follow&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="195px" height="30px"></iframe>
</div>
</div>
<div id="me" class="leaguegothic white page f2">
<div class="w960 center" style="margin-top:50px;">
<div class="right"><img src="demo/assets/Classy Skaught.jpg" style="width:200px;"><br><span class="calibri f0">Me enjoying some fine chocolate milk.</span></div>
<h1>Hey, I'm Scott</h1>
I like to hit the keyboard and make nifty things.<br>
I do hope you fine chaps enjoy Parallax.js as much as I do. <br> <br>
If you have any questions, compliments, or just built something super cool with it, I'd love to hear about it!<br>
Contact: <span style="color:#AE0000">scott.tolksdorf@gmail.com</span>
</div>
</div>
<div id="sandbox" class="leaguegothic white page">
<a class="noanchor" href="https://github.com/stolksdorf/Parallaxjs"><div id="logo" class="f2">PARALLAX.JS</div></a>
<div class="f0 center w750 pad">
<div class="f3">Examples</div>
<div id="fromLast" class="clickable f1">Returns you to the last page you were on</div>
<div id="fromCurrent" class="clickable f1">Alert from the current page</div>
<div id="fromRight" class="clickable f1">From the right slow</div>
<div id="fromTop" class="clickable f1">From the top with linear easing</div>
<div id="fromLeft" class="clickable f1">From the left with increased parallax</div>
<div id="fromBottom" class="clickable f1">From the bottom with an onload function</div>
<pre id = "codebox" class="black">Hover to see code.
Click to see it in action!</pre>
</div>
</div>
<div id="boo" class="leaguegothic white page clickable">
<div class="center w400 " style="margin-top:20%;">
<div class="lh0" style="font-size:300px;">BOO!</div>
<div style="font-size:47px">Click anywhere to head back.</div>
</div>
</div>
<div id="features" class="leaguegothic white page">
<a class="noanchor" href="https://github.com/stolksdorf/Parallaxjs"><div id="logo" class="f2 left">PARALLAX.JS</div></a>
<div id="content" class="black whitebg calibri f0 center w750 pad">
<h1>What is Parallax.js?</h1>
<p>
Parallax.js is a nifty Javascript framework that allows you to easily add sliding page trasitions and parallaxing backgrounds to any project. <br>
Very light weight, very cool. Just like fezes.
</p>
<h1>Adding Pages</h1>
<p>
Add accepts either a name and an element, or just an element.
With the latter Parallax.js will try to use the element's Id as the name.
Pages can be accessed using their name as a property on the Parallax.js object.
<pre class="jscode">parallax.add("foo", $("#page1"))
.add($("#bar"));
parallax.foo; //<- woah! they're properties now!
parallax.bar;
</pre></p>
<h1>Backgrounds and Parallax Scaling</h1>
<p>
To get a nifty parallaxing background, just set a jQuery element to be Parallax.js's background. <br>
For best results, make sure that the element's background image is a repeating image. <br>
You can also control the scaling, or how much the background moves in relation to pages.
<pre class="jscode">parallax.background = $("body");
parallax.scaling = 0.4; //background moves 40% with the pages
</pre></p>
<h1>Speed and Easing</h1>
<p>
Some like it fast, some like it slow. Some like to swing and others like to get... umm linear? <br>
Whatever you fancy, Parallax.js has you covered.
<pre class="jscode">parallax.speed = 1200; //In milliseconds of course!
parallax.easing = 'linear';
</pre></p>
<h1>Movement</h1>
<p>
The meat and potatoes. Invoking these will move that page in from that side.
<pre class="jscode">parallax.bar.left(); //Bar slides in from the left
parallax.foo.top(); //bringing back foo from the top
parallax.bar.bottom(IAmBack()); //We got callbacks too ;)
function IAmBack(){
alert("I'm back foo!");
}
</pre></p>
<h1>Show and Hide</h1>
<p>
Sometimes we don't need the fanciness. Show and hide simply bring pages to focus instantly, or hides them. <br>
<pre class="jscode">//All pages start out hidden,
//remember to show your initial page!
parallax.foo.show();
parallax.bar.hide(); //Bar is being a tad shy
</pre></p>
<h1>Last and Current</h1>
<p>
Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.
<pre class="jscode">parallax.bar.left()
parallax.current.ackbar(); //Bar thinks it's a trap!
parallax.foo.top();
parallax.current.ackbar(); //Foo now thinks it's a trap
parallax.last.right(); //Bar slides in from the right
</pre></p>
<h1>OnLoad and Preload</h1>
<p>
Sometimes your page just has to run some code when it hits the big screen. We understand. Preload runs before the page animation, onload runs after.
<pre class="jscode">parallax.bar.onload = function(){
alert( "sweetest function eva!");
};
parallax.bar.left(); //Fires that function!
parallax.bar.show(); //Also fires it, how cool!
//parallax itself has it's own preload and onload functions
parallax.preload = function(){
//these get run on -every- page,
//in addition to the page's onload/preload functions
alert("Super annoying alert");
};
</pre></p>
<h1>Protips!</h1>
<p>
<pre class="jscode">//Remember parallax can be aliased!
p = parallax;
//Using arrow key navigation is super cool
//most users find it very intuitive
$(document).keydown(function(e){
if (e.keyCode == 37) { //this is the left key,
p.bar.left();
}
}); //check out the code of this demo, it has arrow key navigation!
//For reference; 38 - top, 39 - right, 40 - bottom
//Before using .last either check to see if it's null
if(typeof p.last === 'undefined'){
//handle it here
}
//or set it before hand
p.last = p.foo;
//Movement callbacks and .onload look like they do the same thing
//But they don't!
p.bar.onload = herp();
p.bar.left(derp()); //both herp and derp get run
p.current.show() //only herp gets run
</pre></p>
</div>
</div>
</div>
<div id="leftControl" class="control">
<img id="leftArrow" class="arrow left" style="width:60px" src="demo/assets/arrowleft2.png"></img>
<div id="leftText" class="dirText" style="float:right"> Test</div>
</div>
<div id="rightControl" class="control">
<img id="rightArrow" class="arrow right" style="width:60px" src="demo/assets/arrowright2.png"></img>
<div id="rightText" class="dirText" style="float:left"> Test</div>
</div>
<div id="topControl" class="control center" style="width:145px;left:45%;">
<img id="topArrow" class="arrow left" style="height:60px" src="demo/assets/arrowtop2.png"></img>
<div id="topText" class="dirText txtcenter" > Test</div>
</div>
<div id="bottomControl" class="control center" style="width:145px;left:45%;bottom:0px;">
<div id="bottomText" class="dirText txtcenter"> Test</div>
<img id="bottomArrow" class="arrow left" style="height:60px" src="demo/assets/arrowbottom2.png"></img>
</div>
</body>
</html>