滾動綁定動畫廣告
- Summary Styling Animations Scrollbound Animations Banner markup Cards

滾動綁定動畫廣告

摘要

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

樣式

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

<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 元件，使用 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 個關鍵影格。在視窗範圍的 0% 到 10% 之間，會顯示第一張卡片。在 10% 到 90% 之間，卡片容器會垂直平移 -384 像素，這是每張卡片高度兩倍的負值。當到達這個點時，第三張卡片將完全顯示。在 90% 到 100% 之間，保持相同的位置。

滾動綁定動畫

滾動綁定動畫是使用 amp-position-observer 實作的，這是一個 AMP 元件，可監控元素在使用者滾動時在視窗中的位置，並發送進入、退出和滾動事件，這些事件可以與其他元件一起使用

<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

滾動綁定動畫廣告

摘要

樣式

動畫

滾動綁定動畫

橫幅標記

卡片