捲軸繫結動畫廣告
- 摘要樣式動畫捲軸繫結動畫橫幅標記卡片

捲軸繫結動畫廣告

摘要

使用 amp-position-observer 和 amp-animation 建立互動式廣告的 AMPHTML 廣告範例。

樣式

這是一個進階範例，需要一些樣式設定才能使其外觀和功能正常運作。此處設計的樣式具有響應性，適用於各種廣告尺寸。

<style amp-custom>
  /* Main element that contains the creative. */
  .root-container {
    background: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    overflow: hidden;
    width: 340px;
    height: 240px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  /* Position the footer absolutely, at the bottom of the container. */
  .footer {
    background: #000;
    font-size: 12px;
    padding: 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .footer-logo {
    border-right: 1px solid #fff;
    padding: 0 8px 0 0;
    margin: 0 8px 0 0;
  }
  .logo-img {
    display: block;
  }
  .stretch {
    flex: 1;
  }
  .button {
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
    display: inline-block;
    background-color: #2979ff;
    text-decoration: none;
  }
  .button:active {
    background-color: #92bbff;
  }
  /* Basic cards styling */
  .cards-container {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
  }
  .card {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  /* Change position of the expand button for the middle card */
  .card-gauges .expand-button {
    left: 90px;
    top: 50px;
  }
  .learn-more a:active {
    background-color: #f0f0f0;
  }
</style>

動畫

動畫是使用 amp-animation 實作的，amp-animation 是一個 AMP 元件，它使用 Web Animations API 來支援基於時間和捲軸的動畫。

<amp-animation id="adAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#cardsContainer",
          "keyframes": [
            { "transform": "translateY(0)" },
            { "transform": "translateY(-384px)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

將卡片滑動到與捲軸方向相反的方向：廣告最初顯示最頂端的卡片。當文件捲動時，會顯示其他兩張卡片。

為了達到這個效果，我們定義了 4 個關鍵影格。在視口 (viewport) 的 0% 到 10% 之間，會顯示第一張卡片。在 10% 到 90% 之間，卡片容器將垂直平移 -384 像素，這是每張卡片高度兩倍的負數。當到達這個點時，第三張卡片將完全顯示。在 90% 到 100% 之間，會保持相同的位置。

捲軸繫結動畫

捲軸繫結動畫是使用 amp-position-observer 實作的，amp-position-observer 是一個 AMP 元件，可監控元素在視口中的位置，並在使用者捲動時發送 enter、exit 和 scroll 事件，這些事件可以與其他元件一起使用。

<amp-position-observer
  intersection-ratios="1"
  viewport-margins="10vh"
  on="scroll:adAnim.seekTo(percent=event.percent)"
  layout="nodisplay">
</amp-position-observer>

<div class="root-container">
 <div class="footer">
   <div class="footer-logo">
     <amp-img src="/static/samples/img/car-logo.png"
         width="72"
         height="32"
         layout="fixed"
         alt="Howdy"
         class="logo-img"></amp-img>
   </div>
   <div class="stretch">The All-New WX-S R5</div>
   <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button">
     Learn more
   </a>
 </div>

卡片

<div class="cards-container" id="cardsContainer">
  <div class="card card-seats">
    <amp-img src="/static/samples/img/car-seats.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Ergonomic Leather Seats"
        class="a-carousel-img"></amp-img>
  </div>
  <div class="card card-gauges">
    <amp-img src="/static/samples/img/car-gauges.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Sport Gauge Cluster"
        class="a-carousel-img"></amp-img>
  </div>
  <div class="card card-engine">
    <amp-img src="/static/samples/img/car-engine.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Tuned Engine"
        class="a-carousel-img"></amp-img>
  </div>
</div>

需要進一步說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特性？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @zhouyx 撰寫

捲軸繫結動畫廣告

摘要

樣式

動畫

捲軸繫結動畫

橫幅標記

卡片