AMP

重要事項:這份文件不適用於您目前選取的格式 廣告

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="300px">
  <amp-img
    src="fullscreen.png"
    width="300"
    height="500"
    layout="responsive"
  ></amp-img>
</amp-fx-flying-carpet>

以下是對 amp-fx-flying-carpet 定位的要求

  • 其位置應避免遮蔽第一個視埠 (在頂端 75% 以外)。
  • 其位置應讓頂端在捲動時可到達或高於最後一個視埠的頂端。

屬性

高度

「飛天魔毯」的「視窗」高度。

通用屬性

amp-fx-flying-carpet 包含 通用屬性,這些屬性已擴充至 AMP 組件。

樣式設定

您可以自由使用 amp-fx-flying-carpet 元素選取器來設定樣式。amp-fx-flying-carpet 元素一律為 position: relative

驗證

請參閱 AMP 驗證器規格中的 amp-fx-flying-carpet 規則

需要更多協助嗎?

您已閱讀這份文件十幾次,但內容似乎沒有涵蓋您的所有問題?或許其他人也有同感:請在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能?

AMP 專案非常鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎針對您特別關注的問題提供一次性貢獻。

前往 GitHub