Skip to content

Instantly share code, notes, and snippets.

@lindsoe lindsoe/amp-story.markdown
Last active Sep 11, 2019

Embed
What would you like to do?
AMP Story
<amp-list height="900" items="." single-item="." src= "https://gist.githubusercontent.com/lindsoe/33d4a9338380df7630542a7d70665f85/raw/script.js">
<template type="amp-mustache">
<amp-story standalone>
{{#items}}
<amp-story-page id="{{id}}" >
{{#layers}}
<amp-story-grid-layer
template="{{template}}" class="{{class}}">
<div class="{{divclass}}">
{{#images}}
<amp-img src="{{src}}"
width="{{width}}" height="{{height}}"
{{{params}}} layout="{{layout}}">
</amp-img>
{{/images}}
{{#video}}
<amp-video {{params}} width="{{width}}"
height="{{height}}" layout="{{layout}}">
<source src="{{src}}" type="{{type}}">
</amp-video>
{{/video}}
{{#text}} {{{text}}} {{/text}}
</div>
</amp-story-grid-layer>
{{/layers}}
</amp-story-page>
{{/items}}
<amp-story-bookend
src="https://api.myjson.com/bins/baz3j"
layout="nodisplay">
</amp-story-bookend>
</amp-story>
</template>
</amp-list>
{
"items": [
{
"id": "cover",
"layers": [
{
"template": "fill",
"images": [{
"src" : "https://asserts.lindsoe.net/finger.jpg",
"params": "",
"width": "720",
"height": "1280",
"layout": "responsive"
}
]
},
{
"template": "vertical",
"text": "<div class='h1'>AMP møder Codepen</div><div class='h2'>code-to-go</div>"
}
]
},
{
"id": "page2",
"layers": [
{
"template": "fill",
"images": [{
"src" : "https://asserts.lindsoe.net/hand.jpg",
"params": "animate-in='drop' animate-in-duration='1.5s'",
"width": "720",
"height": "1280",
"layout": "responsive"
}
]
},
{
"template": "thirds",
"text": "<div class='h1' grid-area='upper-third'>Fordele i Codepen</div><br/><p grid-area='lower-third' class='bottom'>Koncentrer dig om koden til det AMP-komponent, som du eksperimenterer med eller konfigurerer. Style i SCSS/SASS og kopier bagefter til amp-custom. Selv JSON-data kan du have i JS-vinduet.</p>"
}
]
},
{
"id": "page3",
"layers": [
{
"template": "fill",
"video": [
{
"src": "https://asserts.lindsoe.net/rabbit.mp4",
"width": "720",
"height": "1280",
"params": "autoplay loop",
"poster": "https://asserts.lindsoe.net/rabbit.jpg",
"layout": "responsive",
"type": "video/mp4"
}
]
},
{
"template": "vertical",
"text": "<span class='h2'>... og sådan kunne jeg blive ved!</span>"
}
]
},
{
"id": "page4",
"layers": [
{
"template": "fill",
"class" : "noedge",
"divclass" : "wrapper",
"images": [
{
"src" : "https://asserts.lindsoe.net/bubble.jpg",
"params": "animate-in='fade-in' animate-in-delay='0.4s'",
"width": "720",
"height": "1280",
"layout": "responsive"
},
{
"src" : "https://asserts.lindsoe.net/computer.jpg",
"params": "animate-in='fade-in' animate-in-delay='0.6s'",
"width": "720",
"height": "1280",
"layout": "responsive"
},
{
"src" : "https://asserts.lindsoe.net/computer2.jpg",
"params": "animate-in='fade-in' animate-in-delay='0.8s'",
"width": "720",
"height": "1280",
"layout": "responsive"
},
{
"src" : "https://asserts.lindsoe.net/computerfigures.jpg",
"params": "animate-in='fade-in' animate-in-delay='1s'",
"width": "720",
"height": "1280",
"layout": "responsive"
}
]
},
{
"template": "vertical",
"class": "center-text",
"text": "<p class='banner-text' animate-in='pulse'>..men det er jo kun en pen</p>"
}
]
}]
}
<script src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
amp-story {
font-family: 'Oswald',sans-serif;
color: #fff;
}
amp-story-page {
background-color: #000;
}
h2, .h2 {
font-size: 1.75em;
font-weight: normal;
line-height: 1.174;
}
h1, .h1 {
font-weight: bold;
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
color: #fff;
}
p {
font-weight: normal;
font-size: 1.1em;
line-height: 1.5em;
color: #fff;
}
amp-story-grid-layer {
&.bottom {
align-content: end;
}
&.noedge {
padding: 0px;
}
&.center-text {
align-content: center;
}
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.banner-text {
text-align: center;
background-color: #000;
line-height: 2em;
}
.bottom {
//margin-top:300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.