This repository has been archived by the owner on Oct 22, 2019. It is now read-only.
Amp flying carpet #169
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!---{ | ||
| "experiment": true, | ||
| "component": "amp-fx-flying-carpet" | ||
| }---> | ||
| <!-- | ||
| #### Introduction | ||
|
|
||
| [amp-fx-flying-carpet](https://github.com/ampproject/amphtml/blob/master/extensions/amp-fx-flying-carpet/amp-fx-flying-carpet.md) displays its children inside a container of fixed height. As the user scrolls the page, the flying carpet reveals more of it contents, sliding across its children as if peering through a window in the page. | ||
|
|
||
| For best experience of this example, use a mobile device or choose a mobile device layout using the Chrome console. | ||
| --> | ||
| <!-- --> | ||
| <!doctype html> | ||
| <html ⚡> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <!-- #### Setup --> | ||
| <!-- Import the `amp-fx-flying-carpet` component in the header. --> | ||
| <script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <!-- | ||
| #### Basic Usage | ||
| --> | ||
| <!-- | ||
|
|
||
| `amp-fx-flying-carpet` elements must be positioned after the first viewport | ||
| so make sure to place enough content before the element to cover the targeted viewport sizes. | ||
|
|
||
| The text that follows is to ensure that the `amp-fx-flying-carpet` is placed after the first viewport. | ||
| --> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. | ||
| </p> | ||
|
|
||
| <!-- | ||
| `amp-fx-flying-carpet` can be used to display images. | ||
| Use `height` parameter to specify the height of the flying carpets "window". | ||
|
|
||
| Use vw/vh to size elements inside the `amp-fx-flying-carpet` relative to the size of the viewport. This will allow the best scrolling effect having the element using the entire viewport. | ||
| --> | ||
| <amp-fx-flying-carpet height="200px"> | ||
|
There was a problem hiding this comment. The most probable usage is an ads embed instead of an image embed. There was a problem hiding this comment. I can add another amp-fx-flying carpet displaying an ad (use it as first example and maybe keep the one with image as a second one in the sample file). Do you have an ad which takes the entire viewport? The one you linked is a bit small and you can see a lot of grey background. I think we could demonstrate a better effect if we have an ad bigger and while scrolling we discover more of the add. This was one of the reason we picked an image. |
||
| <amp-img src="/img/landscape1.jpg" | ||
| width="100vw" | ||
| height="100vh" | ||
| alt="an image"></amp-img> | ||
| </amp-fx-flying-carpet> | ||
|
|
||
| <!-- | ||
| #### Positioning | ||
| --> | ||
| <!-- | ||
|
|
||
| `amp-fx-flying-carpet` elements must be positioned before the last viewport | ||
|
There was a problem hiding this comment. Does it need to be placed after the first view port as well? Can we specify better what "some content after the component" means? maybe: "so make sure to place enough content after the element to cover the targeted viewport sizes." There was a problem hiding this comment. Yes, we may have deleted at some point. I added a section of text before the component. |
||
| so make sure to place enough content after the element to cover the targeted viewport sizes. | ||
|
|
||
| The text that follows is to ensure that the `amp-fx-flying-carpet` is placed before the last viewport. | ||
| --> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. | ||
| </p> | ||
|
|
||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. | ||
| </p> | ||
| </body> | ||
| </html> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also can't be placed in the last viewport.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, there is already a comment like that if you scroll the page, it says: