AMP Story

amp-story.markdown

AMP Story

A Pen by Per Lindsø Larsen on CodePen.

License.

index.html

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

script.js

{
    "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>"
              }
              ]
        }]
}

scripts

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

style.scss

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;
   }