这是indexloc提供的服务,不要输入任何密码
Skip to content

[Master Feature] Ability to implement "flying carpet" from within AMPHTML ads #15216

@lexandera

Description

@lexandera

We get quite a few requests for "flying carpet effect" ads from our publisher clients. We suggested implementing the amp-fx-flying-carpet around the ad slot, but this has two major downsides:

  • It requires involvement from another team which does web site development and is separate from the client's ads team. Times quoted for the requested changes can be several months.
  • All ads served into such slots must then be close to full screen size since if a 300x250 ad is served into a flying carpet, it will only be visible for a short time when the "window" reaches the center of the page, but otherwise it will just show empty space around the ad.

Because of this we would like to be able to achieve the same effect from within the ad itself.

We see two possible approaches:

  • A pre-packaged solution which automatically creates the background layer, aligns it with the ad viewport, and keeps it in place during scrolling.
  • A DIY approach using the combination of amp-position-observer for keeping the background layer in place, and a sizing solution that would allow us to create a background layer of exactly the same height as the device viewport. Currently the sizing part is what's missing since using "height: 100vh" for the background layer matches the height of the ad's iframe viewport instead of the device viewport height, and matching the height is important in order to be able to keep the background stationary across different device sizes and also to avoid bands of empty space at the top and bottom (the second point applies to both approaches).

Here's an example of the format that we're trying to replicate in AMP (scroll the page inside the device):
http://sandbox.celtra.com/preview/89bde6a9#deviceType=Phone

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions