網站

amp-fx-collection

簡介

<amp-fx-collection> 元件提供了一系列預設的視覺效果，例如視差效果，可以透過 amp-fx 屬性輕鬆地在任何元素上啟用。

目前僅支援視差效果。計畫很快就會支援更多效果，例如淡入、滑入等等。amp-fx-collection 取代了現已棄用的 amp-fx-parallax 元件。

設定

在標頭中匯入 amp-fx-collection 擴充功能。

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

樣式

這些範例使用的 CSS 包含在此處以供參考。這些規則僅用於使範例運作，並非此處涵蓋概念的基礎。

<style amp-custom>
  .header {
    position: relative;
    overflow: hidden;
  }

  .header h1 {
    color: white;
    bottom: 10%;
    left: 10px;
    position: absolute;
    z-index: 1;
    font-size: 1.7em;
  }

  .title {
    background-color: black;
    color: white;
  }

  .parallax-image-window {
    overflow: hidden;
  }

  .parallax-image-window amp-img {
    margin-bottom: -20%;
  }
</style>

標題視差

視差效果允許元素移動，彷彿它比頁面內容的前景更近或更遠。當使用者捲動頁面時，元素會根據指派給 data-parallax-factor 屬性的值，以更快或更慢的速度捲動。

可以透過新增 amp-fx="parallax" 屬性將視差效果新增至任何元素，效果的強度可以透過 data-parallax-factor 控制。

data-parallax-factor 指定一個十進位值，用於控制元素相對於捲動速度的捲動速度快慢：* 值大於 1 時，當使用者向下捲動頁面時，元素會向上捲動（元素捲動速度更快）。* 值小於 1 時，當使用者向下捲動時，元素會向下捲動（元素捲動速度更慢）。

<div class="header">
  <h1 amp-fx="parallax" data-parallax-factor="1.3">
      <span class="title">Lorem Ipsum</span>
  </h1>
  <amp-img width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1484961361402-1ee9b1c7accb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9b58d12098d2e6d4a1199ed426772eb9&auto=format&fit=crop&w=1001&q=80"></amp-img>
</div>

視差圖片視窗

<div class="parallax-image-window">
  <amp-img amp-fx="parallax" data-parallax-factor="1.15" width="618" height="583" layout="responsive" src="https://images.unsplash.com/photo-1527683040093-3a2b80ed1592?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3493d310a725643c1aa1cd201065d31c&auto=format&fit=crop&w=1130&q=80"></amp-img>
</div>

捲動觸發淡入

fade-in 效果允許元素在目標元素於視窗中可見時淡入。

可以透過將 amp-fx="fade-in" 屬性新增至元素，將捲動觸發淡入效果新增至任何元素。

目前僅支援捲動觸發的定時動畫。也就是說，一旦元素在視窗內，就會開始一個定時動畫，使元素淡入。您可以透過以下屬性控制動畫

data-duration - 這是動畫發生的持續時間。預設值為 1000ms。
data-easing - 此參數可讓您在動畫持續時間內改變動畫的速度。預設值為 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您也可以從可用的預設值中選擇一個
"linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00),
"ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00),
"ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00),
"ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (預設),
或指定 custom-bezier() 輸入。
data-margin-start - 此參數決定何時觸發定時動畫。<percent> 中指定的值表示當元素高於視窗指定百分比時，應觸發動畫。預設值為 5%

具有預設屬性的捲動觸發淡入動畫

<amp-img amp-fx="fade-in" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1524495195760-3266feca5b15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7a508f55ae88c8eac7bab9380acded01&auto=format&fit=crop&w=1567&q=80"></amp-img>

慢速淡入動畫

透過指定 data-duration="2000ms"，使淡入動畫持續更長時間。

<amp-img amp-fx="fade-in" data-duration="2000ms" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1526803389087-5a4296962cd7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3f6fada754f8d46245da58be0599c1b8&auto=format&fit=crop&w=1950&q=80" alt="Picture of a road"></amp-img>

延遲淡入動畫

透過指定 data-margin-start="50%"，當元素超過視窗的 50% 時，觸發動畫。

<amp-img amp-fx="fade-in" data-margin-start="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1524063853276-ab560795d106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9bc985b4c36017cfaf3e7359254b1e93&auto=format&fit=crop&w=1950&q=80" alt="Picture of a road"></amp-img>

具有不同貝茲曲線的淡入

透過指定 data-easing="linear"，將動畫的 easing 曲線變更為預設的線性曲線。

<amp-img amp-fx="fade-in" data-easing="linear" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1523316970297-654e42445f32?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c753fde260b01ea8e24a0c500ff1a93a&auto=format&fit=crop&w=1950&q=80" alt="Picture of a rainy road"></amp-img>

捲動相依淡入

fade-in-scroll 效果允許元素在使用者於視窗中捲動時淡入。

可以透過將 amp-fx="fade-in-scroll" 屬性新增至元素，將捲動相依淡入效果新增至任何元素。您可以透過以下屬性控制動畫：* data-margin-start - 此參數決定何時觸發定時動畫。percent 中指定的值表示當元素高於視窗指定百分比時，應觸發動畫。預設值為 0% * data-margin-end - 此參數決定何時停止定時動畫。percent 中指定的值表示當元素超過此閾值時，應完全可見。預設值為 50% * data-repeat - 預設情況下，一旦元素完全可見，元素的透明度就會鎖定。如果開發人員想要在元素完全可見後仍然變更透明度，請在元素上指定此屬性。

具有預設屬性的捲動式淡入動畫

<amp-img amp-fx="fade-in-scroll" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1528067609263-ca1bca6f0af1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=719da4579acae6264f2dd12a29668441&auto=format&fit=crop&w=2378&q=80"></amp-img>

自訂開始/結束點

透過指定 data-margin-start="20%" 和 data-margin-end="80%" 屬性，當元素超過視窗的 20% 時觸發動畫，並在元素超過視窗的 80% 時結束。

<amp-img amp-fx="fade-in-scroll" data-margin-start="20%" data-margin-end="80%" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527596510581-97fb7ea1bb09?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a28f08b21bd8ec9d0e846a4af0a5d06b&auto=format&fit=crop&w=2000&q=80"></amp-img>

完全捲動相依動畫

透過指定 data-repeat 屬性，使動畫完全相依於捲動動作。

<amp-img amp-fx="fade-in-scroll" data-repeat width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1527410514447-0d41efed395f?ixlib=rb-0.3.5&s=bcfb4d1eb7e099ab63f0edfa39580976&auto=format&fit=crop&w=1950&q=80" alt="Picture of a tennis court"></amp-img>

fly-in-left

fly-in-bottom、fly-in-top、fly-in-left 和 fly-in-right 效果允許元素在目標元素於視窗中可見時飛入。

可以透過將 amp-fx="fly-in-bottom"、amp-fx="fly-in-top"、amp-fx="fly-in-left" 或 amp-fx="fly-in-right" 屬性新增至元素，將捲動觸發飛入效果新增至任何元素。

這是一個捲動觸發的定時動畫，即一旦元素在視窗內，就會開始一個定時動畫，沿著 X/Y 軸平移元素。您可以透過以下屬性控制動畫

data-duration - 這是動畫發生的持續時間。預設值取決於您的裝置尺寸，以便在行動裝置、平板電腦和桌上型電腦裝置上獲得最佳預設值。如需更多詳細資訊，請閱讀關於 <a href="/documentation/components/amp-fx-collection/"><code>data-duration</code></a> 屬性的文件。
data-fly-in-distance - 此參數決定平移發生的視窗百分比。預設值取決於您的裝置尺寸，以便在行動裝置、平板電腦和桌上型電腦裝置上獲得最佳預設值。如需更多詳細資訊，請閱讀關於 <a href="/documentation/components/amp-fx-collection/"><code>data-fly-in-distance</code></a> 屬性的文件。
data-easing - 此參數可讓您在動畫持續時間內改變動畫的速度。預設值為 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您也可以從可用的預設值中選擇一個
"linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00),
"ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00),
"ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00),
"ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (預設),
或指定 custom-bezier() 輸入。
data-margin-start - 此參數決定何時觸發定時動畫。percent 中指定的值表示當元素高於視窗指定百分比時，應觸發動畫。預設值為 5%

具有預設屬性的捲動觸發飛入動畫。

<amp-img amp-fx="fly-in-left" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1521229478162-4a20534cdec5?ixlib=rb-0.3.5&s=e93c4d12f98243f12b52a430bdb84720&auto=format&fit=crop&w=1661&q=80"></amp-img>

fly-in-right

具有預設屬性的捲動觸發 fly-in-right 動畫。

<amp-img amp-fx="fly-in-right" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527092035324-6319ef0fcf7a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=969edced71a03ef57558006151596c1b&auto=format&fit=crop&w=1651&q=80"></amp-img>

fly-in-bottom

具有預設屬性的捲動觸發 fly-in-bottom 動畫。

<amp-img amp-fx="fly-in-bottom" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527016856658-ab68a6bad3a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=46287f1f2996d26e5f8fde5a3f6dd7da&auto=format&fit=crop&w=1650&q=80"></amp-img>

fly-in-top

具有預設屬性的捲動觸發 fly-in-top 動畫。

<amp-img amp-fx="fly-in-top" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527048322413-4e4e56c8ab3b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69287e502ab9e858262921ee9dfcd271&auto=format&fit=crop&w=1650&q=80"></amp-img>

慢速飛入動畫

透過指定 data-duration="2000ms"，使飛入動畫持續更長時間。

<amp-img amp-fx="fly-in-left" data-duration="2000ms" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1523255971896-2c08d93dd3a8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1f0f9ab94d2d65d964b1b8681563d93&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>

飛入動畫距離

透過指定 data-fly-in-distance="50%"，使動畫在更大的距離上發生。

<amp-img amp-fx="fly-in-right" data-fly-in-distance="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1522426266214-ec2d2abb9ce0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=87c5df0ba70b2f9971f35c31e5ba71b8&auto=format&fit=crop&w=1653&q=80" alt="Picture of a starry sky"></amp-img>

延遲飛入動畫

透過指定 data-margin-start="50%"，當元素超過視窗的 50% 時，觸發動畫。

<amp-img amp-fx="fly-in-top" data-margin-start="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1521934283989-acaa8ceb335a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c3188079fb9f2e4e364fd2dc43adb68&auto=format&fit=crop&w=668&q=80" alt="Picture of a starry sky"></amp-img>

Fly-in with wifferent bezier curves

透過指定 data-easing="linear"，將動畫的 easing 曲線變更為預設的線性曲線。

<amp-img amp-fx="fly-in-bottom" data-easing="linear" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1473806189829-9641421a59f1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=75ddee8b694c5bef8cb935f6d0effa3a&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>

組合預設：淡入 & 飛入

開發人員也可以透過將以空格分隔的預設清單提供給 amp-fx 引數，來組合不同的預設。例如，您可以讓圖片同時從底部淡入和飛入。

<amp-img amp-fx="fade-in fly-in-bottom" data-duration="600ms" width="650" height="433" layout="responsive" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9e2448175103d36c873e2511d112d339&auto=format&fit=crop&w=1950&q=80" alt="Picture of a starry sky"></amp-img>

組合預設：視差 & 淡入

您也可以在同一個標題上組合視差和淡入。

<div class="parallax-image-window">
  <amp-img amp-fx="parallax fade-in-scroll" data-parallax-factor="1.1" data-margin-start="10%" data-margin-end="80%" data-repeat width="649" height="432" layout="responsive" src="https://images.unsplash.com/photo-1524293765125-99fabde3861f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e56fc64d653a9fe5b1a7f602d57abcd&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>
</div>

需要進一步說明嗎？

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

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @aghassemi 撰寫