implement parallax scrolling

[Nemo64]

This probably doesn't fit into the performance aspect of amp. It is however an often used stylistic effect to have images parallax scrolling. This, of course, doesn't work on mobile yet and is often a problem on desktop browser too so it would be challenging. However: a correct implementation could make this effect much more pleasant.

I imagine it like this:

<amp-parallax width="1200" height="630" layout="responsive">
    <amp-img src="/image.jpg" width="1200" height="1260" layout="responsive"></amp-img>
</amp-parallax>

[cramforce]

This is on our radar. It actually fits well with the performance aspect, because we want to do it well :)

CC @rudygalfi

[dvoytenko]

Parallax can be set up via CSS and would work on Chrome fairly everywhere and on desktop Safari and Firefox.

http://jsbin.com/nevehug/edit?html,css,output

However, it won't work in iOS Safari. The main reason, I believe, is not styling itself, but the way scrolling is implemented. That would be the main challenge implementing it there as well when the scroll events arrive significantly later.

[Nemo64]

@dvoytenko that implementation uses a div with overflow:auto around the entire page which isn't pretty and makes it invalid amp-html. I already thought about implementing paralax with css only but I found no amp valid way. That's why I opened this issue 😉

[ericlindley-g]

Bumping up in priority, per discussion

[ericlindley-g]

Re-opening this to track in context of using scrollbound animation framework to power the feature

[adelinamart]

@cvializ This is a P1 that was not updated in a while. Can you provide a status here. Thank you.

[aghassemi]

This is already shipped under an experiment flag, closing. (experiment will be launched when we are comfortable with the perf/FPS of this by aligning it with #8411 work)

[aghassemi]

reopening to track until experiment flag is removed and feature is fully launched.(Broken downs issues are: https://github.com/ampproject/amphtml/issues/7929 https://github.com/ampproject/amphtml/issues/7928 https://github.com/ampproject/amphtml/issues/7925 https://github.com/ampproject/amphtml/issues/7938 https://github.com/ampproject/amphtml/issues/7930 https://github.com/ampproject/amphtml/issues/7818)

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[aghassemi]

will be handled by #11746

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @aghassemi Do you have any updates?

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @aghassemi Do you have any updates?