滾動式影片廣告
- 摘要樣式動畫滾動式動畫廣告容器影片層內容層

滾動式影片廣告

摘要

使用 amp-animation、amp-video、amp-img 和 amp-position-observer 建立 AMPHTML 廣告範例，此廣告會根據捲動來產生動畫效果。

Demo of this example

樣式

這是一個進階範例，需要一些樣式設定才能使其外觀和功能正常運作。

此處設計的樣式具有回應性，適用於各種廣告尺寸。

<style amp-custom>

  /*
   * Top level container: It fills the parent viewport
   * that hosts the ad.
   */
  .ad-container {
    font-family: "Roboto", sans-serif;
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #FFFFFF;
  }

  /* Video Layer */
  .video-container {
    /**
     * Specifies that right corner should be used
     * as the anchor point when video is scaled down
     * using scrollbound amp-animation.
     */
    transform-origin: calc(100% - 25px) 25px;
    z-index: 2;
  }

  /* Video player: Click-to-player overlay */
  .video-container .poster-image {
    position: absolute;
    z-index: 1;
  }

  .video-container .poster-image img {
    object-fit: cover;
  }

  .video-container .play-icon {
    position: absolute;
    z-index: 3;
    width: 100px;
    height: 100px;
    background-image: url( https://amp.dev.org.tw/static/samples/img/play-icon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Align to the middle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0.9;
  }

  .video-container amp-video video {
    object-fit: cover;
  }

  /* Content Layer */
  .content-container {
    z-index: 1;
  }

  /* Content Layer: Background image */
  .background amp-img {
    margin: -70px;
  }

  .background amp-img img {
    object-fit: cover;
  }

  /* Content Layer: Title and logo */
  .title {
    position: absolute;
    top: 5px;
    padding-left: 15px;
    font-weight: bold;
  }

  /* Content Layer: Footer and learn more button */
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    font-size: 10px;
    display: flex;
    flex-direction: row;
  }

  .footer>* {
    flex: 1;
    align-self: center;
  }

  .footer .learn-more {
    background-color: #2979ff;
    padding: 5px 15px;
    white-space: nowrap;
    flex: 0;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #fafafa;
    text-decoration: none;
  }

  /* Generic CSS class to fill a parent */
  .fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

動畫

此範例中發生兩種滾動式動畫：影片容器的縮放和背景圖片的視差移動。

動畫是使用 amp-animation 實作，這是一個使用 Web Animations API 的 AMP 元件

<amp-animation layout="nodisplay" id="videoAnim">
  <script type="application/json">
    {
    "duration": "10s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#videoContainer",
        "keyframes": [
          { "transform": "scale(1)" },
          { "transform": "scale(0.5)"}          ]
      },
      {
        "selector": "#backgroundImg",
        "keyframes": [
          { "transform": "translateY(0)" },
          { "transform": "translateY(60px)"}
        ]
      }
    ]
  }
  </script>
</amp-animation>

捲動時將影片縮小到角落：影片最初覆蓋整個廣告，當頁面捲動時，影片會慢慢開始縮小並移動到角落，當廣告位於視窗中間時，影片會達到目標尺寸。

為了達到這個效果，我們定義了 4 個關鍵影格。在視窗的 0% 到 10% 之間，影片是全尺寸，在 10% 到 50% 之間，影片開始縮小，直到在視窗中間時縮小到一半尺寸並穩定下來，並保持相同尺寸直到最後一個關鍵影格。

視差背景圖片：此廣告的背景圖片具有細微的視差效果。為了達到這個效果，我們使用滾動式動畫，並在最後一個關鍵影格中指定 60px 的偏移量。

滾動式動畫

滾動式動畫是使用 amp-position-observer 實作，這是一個 AMP 元件，可監控元素在使用者捲動時於視窗內的位置，並派送可與其他元件搭配使用的進入、退出和捲動事件

<amp-position-observer
  intersection-ratios="1"
  on="scroll:videoAnim.seekTo(percent=event.percent)"
  layout="nodisplay">
</amp-position-observer>

頂層容器：它會填滿託管廣告的父視窗。

<div class="ad-container">

影片層

在廣告容器內，我們建立一個點擊播放的覆疊和一個影片元素。

當使用者捲動時，amp-animation 會縮小 videoContainer。

<div id="videoContainer" class="video-container fill">
  <div id="clickToPlayOverlay" class="fill">
    <div class="play-icon" role="button" tabindex="0" on="tap:clickToPlayOverlay.hide, video.play"></div>

    <amp-img class="poster-image" layout="fill" src="/static/samples/img/car-video-poster.png"></amp-img>
  </div>

  <amp-video id="video" controls layout="fill" src="/static/samples/video/car-video-360p.mp4"></amp-video>
</div>

內容層

建立內容層，以託管背景圖片和廣告相關資訊。

當使用者捲動時，amp-animation 會為 backgroundImg 模擬視差效果。

<div class="content-container fill">
  <div class="background">
    <amp-img id="backgroundImg" layout="fill" src="/static/samples/img/car-bg.jpg"></amp-img>
  </div>
  <div class="title">
    <div>
      <amp-img layout="fixed" width="72" height="32" src="/static/samples/img/car-logo.png"></amp-img>
    </div>
    <div>THE ALL NEW</div>
    <div>WS-X LUX</div>
  </div>
  <div class="footer">
    <span>36 months lease, $189/month, $2999 due at signing</span>
    <a href="https://ampproject.org" target="_blank" class="learn-more">LEARN MORE</a>
  </div>
</div>

需要進一步說明嗎？

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

前往 Stack Overflow

有未解釋的功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別關注的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @zhouyx 撰寫