amp-position-observer

描述

在使用者滾動時監控元素在可視區域中的位置，並發送可與其他 AMP 元件一起使用的事件。

必要的指令碼

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>

支援的版面配置

nodisplay

範例

滾動綁定影片廣告滾動綁定動畫廣告

用法

amp-position-observer 元件在使用者滾動時監控元素在可視區域中的位置，並發送 enter、exit 和 scroll:<可視區域中的位置百分比> 事件 (低信任等級)，這些事件可用於觸發其他元件上的動作 (僅限低信任動作) (例如，amp-animation)。

amp-position-observer 元件僅在與其他元件一起使用時才有用，並且本身不做任何事情。

目前，amp-animation 和 AMP 中的幾個影片播放器是唯一允許低信任事件觸發其動作的元件 (例如，開始動畫、跳轉到動畫中的某個位置、暫停影片等)。

滾動綁定動畫

amp-animation 元件公開了一個 seekTo 動作，可以將其綁定到 amp-position-observer 的 scroll 事件以實現滾動綁定動畫。

範例：動畫隨著使用者滾動而旋轉

想像一個動畫，其中時鐘的時針隨著使用者滾動頁面而旋轉。

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation.
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-position-observer to tie the movement of the clock scene within
    the viewport to the timeline of the animation
  -->
  <amp-position-observer
    intersection-ratios="1"
    on="scroll:clockAnim.seekTo(percent=event.percent)"
    layout="nodisplay"
  >
  </amp-position-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

根據在可視區域中的可見性開始/暫停的動畫場景

amp-animation 元件還公開了 start 和 pause 動作，可以將它們綁定到 amp-position-observer 的 enter 和 exit 事件，以根據可見性控制動畫何時開始/暫停。

amp-position-observer 元件公開了各種可見性配置，例如 intersection-ratios 和 viewport-margins (類似於 IntersectionObserver)，可用於微調何時將目標視為可見。

範例：動畫根據可見性開始和暫停

考慮相同的時鐘動畫，但這次指針會隨著時間動畫，除了我們希望動畫在時鐘至少 50% 可見時開始，並在時鐘變得小於 50% 可見時立即暫停。

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation
-->
<!--
   Also note that this is the same animation as the scroll-bound version above
   the animation is the same, just the triggering mechanism with
   `amp-position-observer` is different!
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-position-observer to tie the start/pause of the animation with
    the visibility of the scene.
  -->
  <amp-position-observer
    intersection-ratios="0.5"
    on="enter:clockAnim.start;exit:clockAnim.pause"
    layout="nodisplay"
  >
  </amp-position-observer>

  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

滾動綁定和基於可見性的動畫的無障礙考量

一般來說，動畫可能會給某些使用者群體帶來問題。特別是滾動綁定和視差動畫，對於患有前庭功能障礙的使用者來說可能會有問題。請務必查看 amp-animation 的無障礙考量中提供的建議。

屬性

target (選用)

指定要觀察的元素的 ID。如果未指定，則 <amp-position-observer> 的父元素將用作目標。

intersection-ratios (選用)

定義在 <amp-position-observer> 觸發其任何事件之前，目標應該有多少部分在可視區域中可見。該值是介於 0 和 1 之間的數字 (預設為 0)。

您可以通過提供兩個值 (<top> <bottom>) 來指定頂部與底部的不同比例。

intersection-ratios="0" 表示只要目標的一個像素進入可視區域，就會觸發 enter，只要目標的最後一個像素離開可視區域，就會觸發 exit。
intersection-ratios="0.5" 表示只要目標的 50% 進入可視區域，就會觸發 enter，只要目標少於 50% 在可視區域中，就會觸發 exit。
intersection-ratios="1" 表示當目標完全可見時觸發 enter，只要有一個像素離開可視區域，就會觸發 exit。
intersection-ratios="0 1" 使條件根據目標是從頂部 (將使用 0) 還是底部 (將使用 1) 進入/退出而有所不同。

viewport-margins (選用)

一個 px 或 vh 值，可用於縮小可視區域中用於可見性計算的區域。沒有單位的數字將被假定為 px。預設為 0。

您可以通過提供兩個值 (<top> <bottom>) 來指定頂部與底部的不同值。

viewport-margins="100px" 表示將可視區域從頂部縮小 100px，從底部縮小 100px。
viewport-margins="25vh" 表示將可視區域從頂部縮小 25%，從底部縮小 25%。實際上只考慮可視區域的中間 50%。
viewport-margins="100px 10vh" 表示將可視區域從頂部縮小 100px，從底部縮小 10%。

once (選用)

僅觸發 enter 和 exit 事件一次。 scroll 事件也將僅執行一次迭代。

屬性的存在表示 true 值，屬性的不存在表示 false 值。如果屬性存在，則其值必須為空字串、once 或未賦值。

驗證

請參閱 AMP 驗證器規範中的 amp-position-observer 規則。

需要更多協助嗎？

您已經閱讀了這份文件十幾次，但它並沒有真正涵蓋您的所有問題？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的長期參與者，但我們也歡迎您針對您特別關心的問題做出一次性貢獻。

前往 GitHub