捲軸綁定影片廣告
- 摘要樣式動畫捲軸綁定動畫廣告容器影片圖層內容圖層

捲軸綁定影片廣告

摘要

使用 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 撰寫