视差滚动效果

 查看演示  website  立即下载

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.

PREVIOUS:
NEXT:
HTML5蹦床式弹动页面图片切换效果
jQuery cxSelect 多级联动下拉菜单