implement parallax scrolling #1443

Closed
Nemo64 opened this Issue Jan 15, 2016 · 12 comments

Comments

@Nemo64
Contributor

Nemo64 commented Jan 15, 2016

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 comment has been minimized.

Show comment
Hide comment
@cramforce

cramforce Jan 15, 2016

Member

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

CC @rudygalfi

Member

cramforce commented Jan 15, 2016

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

CC @rudygalfi

@dvoytenko

This comment has been minimized.

Show comment
Hide comment
@dvoytenko

dvoytenko Jan 15, 2016

Collaborator

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.

Collaborator

dvoytenko commented Jan 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Nemo64

Nemo64 Jan 15, 2016

Contributor

@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 😉

Contributor

Nemo64 commented Jan 15, 2016

@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 😉

@rudygalfi rudygalfi added the Needs UX label Jan 23, 2016

@rudygalfi rudygalfi added this to the M2 milestone Jan 30, 2016

@rudygalfi rudygalfi modified the milestones: M2, Backlog Mar 4, 2016

@adelinamart adelinamart modified the milestones: New FRs, Backlog Bugs Feb 3, 2017

@ericlindley-g ericlindley-g modified the milestones: Sprint H2 Feb, New FRs Feb 13, 2017

@ericlindley-g ericlindley-g added this to Sprint Candidate in UI Feb 13, 2017

@aghassemi aghassemi self-assigned this Feb 13, 2017

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Feb 13, 2017

Collaborator

Bumping up in priority, per discussion

Collaborator

ericlindley-g commented Feb 13, 2017

Bumping up in priority, per discussion

@aghassemi aghassemi assigned cvializ and unassigned aghassemi and ericlindley-g Feb 13, 2017

@aghassemi aghassemi referenced this issue Feb 14, 2017

Open

Hero mode for video players #7510

0 of 4 tasks complete

@ericlindley-g ericlindley-g moved this from Sprint Candidate to In Progress in UI Feb 17, 2017

@aghassemi aghassemi closed this in #7794 Mar 1, 2017

@ericlindley-g ericlindley-g moved this from In Progress to Done in UI Mar 9, 2017

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Mar 31, 2017

Collaborator

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

Collaborator

ericlindley-g commented Mar 31, 2017

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

@adelinamart

This comment has been minimized.

Show comment
Hide comment
@adelinamart

adelinamart Jun 7, 2017

Collaborator

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

Collaborator

adelinamart commented Jun 7, 2017

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

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jun 7, 2017

Member

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)

Member

aghassemi commented Jun 7, 2017

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 aghassemi closed this Jun 7, 2017

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jun 8, 2017

Member

reopening to track until experiment flag is removed and feature is fully launched.(Broken downs issues are: #7929 #7928 #7925 #7938 #7930 #7818)

Member

aghassemi commented Jun 8, 2017

reopening to track until experiment flag is removed and feature is fully launched.(Broken downs issues are: #7929 #7928 #7925 #7938 #7930 #7818)

@aghassemi aghassemi reopened this Jun 8, 2017

@ampprojectbot

This comment has been minimized.

Show comment
Hide comment
@ampprojectbot

ampprojectbot Oct 20, 2017

Collaborator

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

Collaborator

ampprojectbot commented Oct 20, 2017

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

@aghassemi aghassemi assigned aghassemi and unassigned cvializ Oct 23, 2017

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Oct 23, 2017

Member

will be handled by #11746

Member

aghassemi commented Oct 23, 2017

will be handled by #11746

@ampprojectbot

This comment has been minimized.

Show comment
Hide comment
@ampprojectbot

ampprojectbot Dec 25, 2017

Collaborator

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

Collaborator

ampprojectbot commented Dec 25, 2017

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

@ericlindley-g ericlindley-g moved this from Sprint (candidate) to Content ecosystem in UI Jan 5, 2018

@ampprojectbot

This comment has been minimized.

Show comment
Hide comment
@ampprojectbot

ampprojectbot Jan 15, 2018

Collaborator

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

Collaborator

ampprojectbot commented Jan 15, 2018

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

@aghassemi aghassemi closed this in #13073 Jan 30, 2018

@ericlindley-g ericlindley-g removed this from Content ecosystem in UI Mar 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment