CODEWITHSUNDEEP
javascript
Piddien
Piddien

Reputation: 1446

Parallax scrolling horizontal

I dont know where to begin. The demo page is here: http://www.perandersen.no/sandbox/parallax/

I use jQuery and the plugin scrollTo. Then I attach a function to the window.onscroll. Sorry it's a bit messy, but please help me optimize it. I am new to JavaScript:

function scroll()
{
 var xPos = window.pageXOffset;


 var element = $("#wrapper");
 var newXPos = Math.abs(xPos /1.1);
 element.css( "left", newXPos );

 element = $("#snowboarder");
 var newXPos = Math.abs(xPos /1.5) + snowboarderPos.left;
 element.css( "left", newXPos );

 element = $("#elevator");
 var newXPos = Math.abs(xPos /1.9) + 2800;
 element.css( "left", newXPos );

  var element = $("#ballong");
 var newXPos = Math.abs(xPos /1.2) + balloonPos.left;
 element.css( "left", newXPos );

// $("#xpos").text(window.pageXOffset);
}

I set the snowboarderPos as a global in the beginning of the script tag som taht it is set before anything happends. On the Elevator object I have hard coded it in this version.

EDIT: Works best in Chrome with a faster processor... so it needs to be optimized.

Upvotes: 0

Views: 1649

Answers (2)

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6116

One possible way to make it seem more responsive is to add a -moz-transition-duration css property to the elements being scrolled. If there are only a few elements, setting the duration to 0.33s or something similar could make it seem quicker.

Upvotes: 0

locrizak
locrizak

Reputation: 12281

Instead of having:

element.css( "left", newXPos );

have you tried:

element.stop().animate( {left:newXPos}, 200 );

Upvotes: 1

Related Questions