插件描述:制作视差滚动效果
The meat and potatoes. Invoking these will move that page in from that side.
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 ;)
functon IAmBack(){
alert("I'm back foo!");
}
# Show and Hide
Sometimes we don't need the fanciness. Show and hide simply bring pages to focus instantly, or hides them.
//All pages start out hidden,
//remember to show your initial page!
parallax.foo.show();
parallax.bar.hide(); //Bar is being a tad shy
# Last and Current
Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.
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
# OnLoad and Preload
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.
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");
};
# Protips!
//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
Godspeed.