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