Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 102 lines (78 sloc) 4.359 kb
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
1 # What is Parallax.js?
2 Is a javascript framework allowing you to slide in pages of your site with having a parallaxing background.
3 Parallax.js keeps pages in a structureless format, meaning you can absolutely control where pages come in and from where, even if it doesn't make geometric sense. You add html elements, or pages, to Parallax.js and use the movement functions to slide them into view, pushing whatever was there out of the way. Very light weight, very cool. Just like fezes.
229da597 » Scott Tolksdorf
2012-09-03 Storing some changes before updating the demo page
4
5 Check out the [demo page](http://stolksdorf.github.com/Parallaxjs)'s features section. It should explain everything you need to know to use Parallax.js. I strongly you suggest to take a dive into the demo page's code base as well, some nifty things in there.
6
5297001c » Scott Tolksdorf
2012-09-03 Added liscense to the readme.
7 # I want to use Parallax.js for my project. What license is it under?
8 I like to consider Parallax.js under the [WTFPL](http://sam.zoy.org/wtfpl/). In short, do whatever you like. Good luck on whatever you are working on and feel free to email me when it's done, I'd love to see your work.
9
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
10 # Adding Pages
11 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.
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
12
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
13 parallax.add("foo", $("#page1"))
14 parallax.add($("#bar"));
15
16 parallax.foo; //<- woah! they're properties now!
17 parallax.bar;
18
19 # Backgrounds and Parallax Scaling
20 To get a nifty parallaxing background, just set a jQuery element to be Parallax.js's background. For best results, make sure that the element's background image is a repeating image. You can also control the scaling, or how much the background moves in relation to pages.
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
21
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
22 parallax.background = $("body");
23 parallax.scaling = 0.4; //background moves 40% with the pages
24
25 # Speed and Easing
26 Some like it fast, some like it slow. Some like to swing and others like to get... umm linear? <br>
27 Whatever you fancy, Parallax.js has you covered.
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
28
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
29 parallax.speed = 1200; //In milliseconds of course!
30 parallax.easing = 'linear';
31
32 # Movement
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
33 The meat and potatoes. Invoking these will move that page in from that side.
34
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
35 parallax.bar.left(); //Bar slides in from the left
36 parallax.foo.top(); //bringing back foo from the top
37 parallax.bar.bottom(IAmBack()); //We got callbacks too ;)
38
39 functon IAmBack(){
40 alert("I'm back foo!");
41 }
42
43 # Show and Hide
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
44 Sometimes we don't need the fanciness. Show and hide simply bring pages to focus instantly, or hides them.
45
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
46 //All pages start out hidden,
47 //remember to show your initial page!
48 parallax.foo.show();
49 parallax.bar.hide(); //Bar is being a tad shy
50
51 # Last and Current
52 Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
53
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
54 parallax.bar.left()
55 parallax.current.ackbar(); //Bar thinks it's a trap!
56 parallax.foo.top();
57 parallax.current.ackbar(); //Foo now thinks it's a trap
58 parallax.last.right(); //Bar slides in from the right
59
60 # OnLoad and Preload
61 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.
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
62
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
63 parallax.bar.onload = function(){
64 alert( "sweetest function eva!");
65 };
66 parallax.bar.left(); //Fires that function!
67 parallax.bar.show(); //Also fires it, how cool!
185404d1 » Scott Tolksdorf
2012-09-03 Tweaking the readme
68
648c5a99 » Scott Tolksdorf
2012-09-03 Removed a bunch of conflicting files. Made a swanky new readme. Awwww
69 //parallax itself has it's own preload and onload functions
70 parallax.preload = function(){
71 //these get run on -every- page,
72 //in addition to the page's onload/preload functions
73 alert("Super annoying alert");
74 };
75
76 # Protips!
77 //Remember parallax can be aliased!
78 p = parallax;
79
80 //Using arrow key navigation is super cool
81 //most users find it very intuitive
82 $(document).keydown(function(e){
83 if (e.keyCode == 37) { //this is the left key,
84 p.bar.left();
85 }
86 }); //check out the code of this demo, it has arrow key navigation!
87 //For reference; 38 - top, 39 - right, 40 - bottom
88
89 //Before using .last either check to see if it's null
90 if(typeof p.last === 'undefined'){
91 //handle it here
92 }
93 //or set it before hand
94 p.last = p.foo;
95
96 //Movement callbacks and .onload look like they do the same thing
97 //But they don't!
98 p.bar.onload = herp();
99 p.bar.left(derp()); //both herp and derp get run
100 p.current.show() //only herp gets run
101
102 Godspeed.
Something went wrong with that request. Please try again.