視覺上呈現出飛毯效果

文字上難以說明，我們直接來看這兒的範例吧!!

從這個範例，我們可以看到使用 amp-fx-flying-carpet 這個 component ，而做 scrolling 的時候，只有文字區隨著捲動了，但有多張的圖片則在頁面中固定位置呈現

基本用法

<amp-fx-flying-carpet height="300px">
  <amp-img src="fullscreen.png" width="300" height="500" layout="responsive"></amp-img><!-- 不限於 image ，也可放 <amp-ad> 等-->
</amp-fx-flying-carpet>

其中 <amp-fx-flying-carpet> 包圍的內容（例如圖片），就會固定在頁面特定位置

Required Script

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

Attributes

height - 固定高度

common attributes

詳細請看

Styling

可以為 <amp-fx-flying-carpet> 自由設置樣式

<amp-fx-flying-carpet> 永遠都會是 position: relative

參考來源：

• AMP官網
• Amp By Example
• Amp By Example