amp-fx-flying-carpet

簡介

amp-fx-flying-carpet 會在其固定高度的容器內顯示子元素。當使用者捲動頁面時，飛毯會顯示更多內容，彷彿透過頁面上的視窗窺視其子元素般滑動。

設定

在標頭中匯入 amp-fx-flying-carpet 元件。

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

amp-fx-flying-carpet 元素必須放置在第一個視口之後，因此請確保在元素之前放置足夠的內容，以涵蓋目標視口大小。下方的方框是為了確保 amp-fx-flying-carpet 放置在第一個視口之後。

廣告飛毯

amp-fx-flying-carpet 可用於顯示廣告。使用 height 參數指定飛毯「視窗」的高度。

<div class="amp-flying-carpet-text-border">Advertising</div>
<amp-fx-flying-carpet height="300px">
  <amp-ad width="300" height="600" layout="fixed" type="doubleclick" data-slot="/35096353/amptesting/formats/flying_carpet">
  </amp-ad>
</amp-fx-flying-carpet>
<div class="amp-flying-carpet-text-border">Advertising</div>

圖片飛毯

amp-fx-flying-carpet 也可用於顯示圖片。

<amp-fx-flying-carpet height="300px">
  <amp-img src="/static/samples//img/landscape_lake_1280x857.jpg" width="1280" height="853" alt="an image">
  </amp-img>
</amp-fx-flying-carpet>

定位

amp-fx-flying-carpet 元素必須放置在最後一個視口之前，因此請確保在元素之後放置足夠的內容，以涵蓋目標視口大小。

下方的方框是為了確保 amp-fx-flying-carpet 放置在最後一個視口之前。

需要更多說明嗎？

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

前往 Stack Overflow

未說明的特色功能？

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

在 GitHub 上編輯範例

由 @kul3r4 撰寫