用 position observer 實現 scrolling 頁面時的一些互動效果

在 amp 的世界裡，我們可以可以利用 scrolling 時做些事唷!!

先來看張圖好了↓↓↓

只要運用了 amp-position-observer （垂直捲動），就算一行的 js 都不寫，也可以玩出些小東西。如上圖，我們可以看到，隨著垂直的 scrolling ，可以旋轉時針。

今天先來介紹一下 amp-position-observer

Required Script

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

範例解說

我們利用上面那個效果的原始檔來解說

<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s", // 3秒
    "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">
  <!-- 用 seekTo 來監聽 scroll 事件 -->
  <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><!-- 這就是上面選取的物件，會做180度的旋轉 -->
  </amp-img>
</div>

Attributes

target - 目標，非必填

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

intersection-ratios - 交叉比率，非必填

定義在 <amp-position-observer> 觸發其任何事件之前。 該值是介於 0 和 1 之間的數字（默認值為 0 ）

• intersection-ratios="0" - 只要 target 的一個像素進入 viewport ，就會觸發 enter ，並且只要 target 的最後一個像素離開 viewport ，就會觸發 exit

• intersection-ratios="0.5" - 只要 target 的 50％ 進入 viewport ，就會觸發 enter ；只要 target 不到 50％ ，就會觸發 exit

• intersection-ratios="1" - 表示當 target 完全可見時觸發 enter ；一旦單個像素離開 viewport，就會觸發 exit

• intersection-ratios="0 1" - target 進入/退出時是從頂部（使用0）還是從底部（使用1）

viewport-margins - viewport margin，非必填

px 或 vh 值，沒有單位的數字將被假定為 px。 默認為0。

您可以通過提供兩個值（top 、 bottom）為頂部與底部指定不同的值；例如： viewport-margins="100px 10vh"

once - enter 、 exit 、 scroll event 只觸發一次，非必填

現在，我們知道基本的用法了，我們就可以做出如範例更複雜的互動。

參考來源：

• AMP官網
• AMP By Example