Vertical Parallax in jQuery

Question

I'm currently building my portfolio site, and I'm having a little difficulty, basically I have two small problems...

1. I cant get the background position to animate in the y axis when the position contains a "center" attribute on the x axis

2. I cant get the effect to happen while scrolling ,pause when I stop scrolling, and continue when I continue to scroll

Here is the code i'm using:

//Top section parallax
$(function parallaxInnerAnimation(){

    //Reset the background position
    $('#first-canvas .inner').css({backgroundPosition: 'center 0px'});

    //Set the animations
    $(window).scroll(function() {
        $('#first-canvas .inner').animate({
        backgroundPosition:"(center -200px)"
        }, 5000, 'linear');
    });

});

I'm using the jquery.backgroundPosition plugin v1.22 by Alexander Farkas, and jQuery 1.6.1.

This site is css3 and html5, and is mainly meant to support IE9, Firefox 4, and Chrome 11 etc... I'm making a different site for older browsers so backwards compatibility can be sacrificed

Sorry if its a dumb question, I'm not really a developer, more of a designer who can code front end stuff, thanks in advance.

UPDATE:

To put it in context, I have now placed it on my live server http://charlieryan.co.uk/stack-overflow/

Answer 1

I looked at backgroundPosition.charlieryan.js plugin, it do not support for center background position. You might have to modify the plugin and use it. There is a method called toArray which should me modified. The js error is related to this issue. Let me know if you need more help.

Answer 2

$(window).scroll(function ()
{
 var yPos=-($(window).scrollTop() / 6);
 if($(window).scrollTop()>100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
 }
 if($(window).scrollTop()<100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
 }
});

official tutorial here