Is there a way to parallax CSS background images?

[marketingpartnersau]

Hey man,

Cool script. Would be awesome to be able to animate background images out of the box though. Are you able to point me in the right direction?

[oblador]

Hey,

Yes it should work with the custom animator something like this:

function(elementPosition) {
  return {
    backgroundPosition: elementPosition/-10 + 'px'
  };
}

However I recommend against it since it will not be as performant as using translate3d and personally had some trouble with making it work well with responsive sites.

In my use case I fake it by adding the background image to another element with another element absolutely positioned over. Here's one live example using this technique.

Think I will commit more usage examples whenever I get some time to do it :-)

[marketingpartnersau]

Legendary - thanks mate!

Cheers, Harley Alexander Digital & Print Designer + Web Developer http://marketingpartners.com.au

On Thu, Sep 11, 2014 at 10:49 PM, Joel Arvidsson notifications@github.com wrote:

Hey,

Yes it should work with the custom animator something like this:

function(elementPosition) { return { backgroundPosition: elementPosition/-10 + 'px' };}

However I recommend against it since it will not be as performant as using translate3d and personally had some trouble with making it work well with responsive sites.

In my use case I fake it by adding the background image to another element with another element absolutely positioned over. Here's one live example https://durated.com/stories/the-brands/durated-meets-lapaporter using this technique.

Think I will commit more usage examples whenever I get some time to do it :-)

— Reply to this email directly or view it on GitHub https://github.com/durated/angular-parallax/issues/18#issuecomment-55258549 .

[amergin]

@oblador: the live example url is not working anymore.