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/

Mass

Do you have a live example? This sounds interesting but it's hard to know what's going wrong. – Berna

I didn't, but I just put it on my server - charlieryan.co.uk/stack-overflow thanks! – Mass

I'm getting a javascript error as soon as I scroll: line 42 of backgroundPosition.charlieryan.js: res is null. This might be your issue. – Berna

i see that too, but have no idea why it is – Mass

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.

Antimasque

thanks, i've been looking into this, but i'm far from an expert (the script wasn't written by me after all, the name is just because I work on hundreds of sites and its easy to organise stuff like that), how would I go about doing this? – Mass

Please replace the toArray method in that plugin with the below code function toArray(strg){ strg = strg.replace(/left|top/g,'0px'); strg = strg.replace(/right|bottom/g,'100%'); strg = strg.replace(/center/g,'50%'); strg = strg.replace(/-\s/g,'-'); strg = strg.replace(/([0-9\.]+)(\s|)|$)/g,"$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; } This will fix the issue. – Antimasque

thats perfect, thanks, now i've just got to work out the second part of the question (about the scrolling) – Mass

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

Telethon