Part of the code for the sliding photos effect seen on the jazzpunk site (http://necrophonegames.com/jazzpunk/)

slidingPhotos.js

generateSideTiles();

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});

// when background has finished loading...
$('#headerCacheImg').load(function() {
  $('#headerBg').animate({
    opacity:1
  }, 1000);

});

// scrolling effect of bg tiles
$(window).scroll(function(){
  var newXNum = $(window).scrollTop();
  //console.log("scrol:"+newXNum);
  $(".headerRowOdd").css('background-position', newXNum+"px 0px");
  $(".headerRowEven").css('background-position', -newXNum+"px 0px");
  //$(".headerRowOdd").css('background-position-x', newXNum+"px");
  //$(".headerRowEven").css('background-position-x', -newXNum+"px");
});

function generateSideTiles(){
  for(var i = 0; i < 50; i++){
    var alternateStr = "headerRowOdd";
    if (i % 2 == 0) alternateStr = "headerRowEven";
    var htmlStr = "<div id=\"sideRow"+i+"\" class=\"headerBgRowBot sideRow "+alternateStr+"\"></div>";
    $("#sideTileContainer").append(htmlStr);
    $("#sideRow"+i).css("top", i*60+"px");
  }
}


// when logo has finished loading
$('#logoCacheImg').load(function(){

  setTimeout(function(){

    var wNum = 770;
    var hNum = 309;
    //$(this).width(0);
    //$(this).height(0);
    $('#headerJPLogo').animate({
      width: wNum+"px",
      height: hNum+"px"
    }, 1000);
  }, 500);
  //$('#headerFore').fadeTo( 2000 , 1);
});

$('#headerMsgImg').load(function(){
  setTimeout(function(){
    $('#headerMsgImg').animate({
      top:"0px"
    }, 500);
  }, 500);
  //$('#headerMsgImg').delay(500).fadeTo( 2000 , 1);
});

$('#headerDescImg').load(function(){
  //$('#headerDescImg').delay(500).fadeTo( 2000 , 1);
  $('#headerDescImg').delay(500).animate({
    opacity:1
  }, 2000);
});

$('#sideCacheImg').load(function(){
  //$('#sidebarDiv').delay(500).fadeTo( 2000 , 1);
  $('#sidebarDiv').animate({
    opacity:1
  }, 2000);
});