Skip to content

amp-story-desktop-one-panel Update demo with usecases #34867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 15, 2021
Merged

amp-story-desktop-one-panel Update demo with usecases #34867

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
596bfc1
Update demo with usecases.
processprocess Jun 15, 2021
590ed56
Update template.
processprocess Jun 15, 2021
34dd901
Revert change in visual test.
processprocess Jun 15, 2021
e8164bb
Remove whitespace.
processprocess Jun 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 71 additions & 6 deletions examples/amp-story/amp-story-desktop-one-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,22 @@
<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>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async="" custom-element="amp-animation" src="/dist/v0/amp-animation-0.1.max.js"></script>
<script async custom-element="amp-story-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,500&amp;display=swap" rel="stylesheet">
<style amp-custom>
amp-story {
font-family: 'Poppins', sans-serif;
color: white;
text-align: center;
}
amp-story-grid-layer h1 {
font-size: 2em;
}
amp-story-grid-layer h1, amp-story-grid-layer h2 {
font-weight: 700;
text-shadow: 0px 4px 4px #00000055;
}
#expToggle {
position: absolute;
top: 0;
Expand All @@ -26,18 +41,68 @@
poster-portrait-src="example.com/poster.jpg"
>
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
page 1
<amp-story-panning-media layout="fill" x="50%" y="0%" lock-bounds>
<amp-img
layout="fill"
width="1600"
height="900"
src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg"
></amp-img>
</amp-story-panning-media>
<amp-story-grid-layer template="thirds">
<span>
<span><h1 animate-in="scale-fade-up">Page 1</h1></span>
<span><h2 animate-in="scale-fade-up" animate-in-delay=".1s">Animate in example</h2></span>
</span>
</amp-story-grid-layer>
<amp-story-page-attachment data-title="lorem ipsum" layout="nodisplay">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate enim fuga maxime, laborum nobis porro quos officiis voluptates magnam distinctio blanditiis quae odit doloribus dolorem cum debitis temporibus molestias facere.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate enim fuga maxime, laborum nobis porro quos officiis voluptates magnam distinctio blanditiis quae odit doloribus dolorem cum debitis temporibus molestias facere.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate enim fuga maxime, laborum nobis porro quos officiis voluptates magnam distinctio blanditiis quae odit doloribus dolorem cum debitis temporibus molestias facere.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate enim fuga maxime, laborum nobis porro quos officiis voluptates magnam distinctio blanditiis quae odit doloribus dolorem cum debitis temporibus molestias facere.
</p>
</amp-story-page-attachment>
</amp-story-page>

<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
page 2
<amp-story-panning-media layout="fill" x="-20%" y="0%" lock-bounds>
<amp-img
layout="fill"
width="1600"
height="900"
src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg"
></amp-img>
</amp-story-panning-media>
<amp-story-grid-layer template="thirds">
<span>
<span><h1 animate-in="scale-fade-up">Page 2</h1></span>
<span><h2 animate-in="scale-fade-up" animate-in-delay=".1s">Animate in example</h2></span>
</span>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
page 3
<amp-story-panning-media layout="fill" x="-20%" y="10%" zoom='1.5' lock-bounds>
<amp-img
layout="fill"
width="1600"
height="900"
src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg"
></amp-img>
</amp-story-panning-media>
<amp-story-grid-layer template="thirds">
<span>
<span><h1 animate-in="scale-fade-up">Page 3</h1></span>
<span><h2 animate-in="scale-fade-up" animate-in-delay=".1s">Animate in example</h2></span>
</span>
</amp-story-grid-layer>
</amp-story-page>

Expand Down