網站

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"，將動畫的緩和曲線變更為預設的線性曲線。

<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 - 這是動畫發生的持續時間。預設值由您的裝置尺寸決定，以便在行動裝置、平板電腦和桌上型電腦裝置上獲得最佳預設值。如需更多詳細資訊，請閱讀 data-duration 屬性的文件。
data-fly-in-distance - 此參數決定轉換發生的可視區域百分比。預設值由您的裝置尺寸決定，以便在行動裝置、平板電腦和桌上型電腦裝置上獲得最佳預設值。如需更多詳細資訊，請閱讀 data-fly-in-distance 屬性的文件。
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>

使用不同貝茲曲線的飛入

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

<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