Vertical parallax in jQuery

Question

I am currently building my portfolio and I have small difficulties, mostly I have two small problems ...

• I can’t get the background position for y-axis animation when the position contains the "center" attribute on the x-axis

• I can’t make the effect happen while scrolling, pause when I stop scrolling, and continue when I keep scrolling

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 am using the jquery.backgroundPosition v1.22 plugin from Alexander Farkas and jQuery 1.6.1.

This site is css3 and html5, and is mainly designed to support IE9, Firefox 4 and Chrome 11, etc. .... I am creating another site for older browsers so that I can sacrifice backward compatibility

Sorry if its a dumb question, I'm not really a developer, but rather a designer who can program front-end material, thanks in advance.

UPDATE:

To express this in context, I now posted it on my live server http://charlieryan.co.uk/stack-overflow/

Answer 1

I looked at the backgroundPosition.charlieryan.js plugin, it does not support the central background position. You may need to modify the plugin and use it. There is a method called toArray that should modify me. The js error is related to this problem. 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