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.