Atropos 元素文件

瀏覽器相容性

Atropos 與支援以下功能的瀏覽器相容

安裝

我們可以從 NPM 安裝 Atropos

npm i atropos

樣式

若要設定 Atropos 元件的樣式，您可以使用 part 屬性鎖定並自訂元件的各個部分。以下是可以設定樣式的部分：

scale：此部分表示用於縮放元件的容器。您可以將樣式套用至此部分以控制縮放行為。
rotate：此部分表示用於旋轉元件的容器。您可以鎖定此部分以套用與旋轉相關的樣式。
inner：此部分表示元件的內部內容。您可以設定此部分的樣式來修改內部內容的外觀。

以下是如何編寫 CSS 規則以設定 atropos-component 內部部分樣式的範例：

atropos-component::part(inner) {
  /* Your styles for the inner part */
}

元件用法

<script>
  // import Atropos component
  import AtroposComponent from 'atropos/element';
  // register Atropos component
  customElements.define('atropos-component', AtroposComponent);
</script>
<atropos-component class="my-atropos">
    <!-- ... -->
</atropos-component>

除了 Atropos 的主要 CSS 樣式之外，我們可能需要新增一些自訂樣式，例如設定 Atropos 的大小

.my-atropos {
  width: 320px;
  height: 160px;
}

元件屬性

名稱	類型	預設值	說明
active-offset	數字	50	啟用時（滑鼠懸停）主要容器的偏移量，基本上表示 `translateZ` 值
always-active	布林值	false	讓 Atropos 永遠處於活動狀態
duration	數字	300	啟用、離開和旋轉期間的過渡持續時間（以毫秒為單位）
rotate	布林值	true	定義是否在指標移動時旋轉容器（啟用時）
rotate-touch	布林值 \| 字串	true	定義是否在觸控移動時旋轉容器（啟用時），必須啟用 `rotate`。也接受特殊值 `scroll-y` - 不會在初始垂直觸控移動（垂直捲動）時旋轉容器，基本上不會阻止頁面垂直捲動 `scroll-x` - 不會在初始水平觸控移動（水平捲動）時旋轉容器，基本上不會阻止頁面水平捲動
rotate-x-max	數字	15	沿 X 軸的最大旋轉角度（以度為單位）
rotate-y-max	數字	15	沿 Y 軸的最大旋轉角度（以度為單位）
rotate-x-invert	布林值	false	反轉沿 X 軸的旋轉（以度為單位）
rotate-y-invert	布林值	false	反轉沿 Y 軸的旋轉（以度為單位）
stretch-x	數字	0	沿 X 軸移動（平移）atropos 容器此值（以百分比表示）。例如，值 `50` 將使容器在其寬度的 +-50% 範圍內移動。僅適用於多個 Atropos，當多個 Atropos 使用相同的父級 `eventsEl` 容器時
stretch-y	數字	0	沿 Y 軸移動（平移）atropos 容器此值（以百分比表示）。例如，值 `50` 將使容器在其高度的 +-50% 範圍內移動。僅適用於多個 Atropos，當多個 Atropos 使用相同的父級 `eventsEl` 容器時
stretch-z	數字	0	沿 Z 軸移動（平移）atropos 容器此值（以百分比表示）。例如，值 `50` 將使容器在其高度的 +-50% 範圍內移動。僅適用於多個 Atropos，當多個 Atropos 使用相同的父級 `eventsEl` 容器時
common-origin	布林值	true	將動態地將具有相同父級的所有 Atropos 元件的 `transform-origin` 設定為同一點（通常是指標位置）。僅適用於多個 Atropos，當多個 Atropos 使用相同的父級 `eventsEl` 容器時
shadow	布林值	true	啟用陰影
shadow-offset	數字	50	陰影偏移量，基本上是陰影元素的 `translateZ`value
shadow-scale	數字	1	陰影比例因子
highlight	布林值	true	啟用高亮
事件
enter	函式		事件將在 Atropos 啟用時（滑鼠懸停）觸發
leave	函式		事件將在 Atropos 停用時（指標移出）觸發
rotate	function(event)		事件將在旋轉時觸發。
插槽
root			傳遞到此處的元素將被新增到 `atropos` 根元素
scale			傳遞到此處的元素將被新增到 `atropos-scale` 元素
rotate			傳遞到此處的元素將被新增到 `atropos-rotate` 根元素

例如

<script>
  import AtroposComponent from 'atropos/element';
  customElements.define('atropos-component', AtroposComponent);
</script>
<atropos-component class="my-atropos"
  active-offset="40"
  shadow-scale="1.05"
>
</atropos-component>
<script>
  const atroposComponent = document.querySelector('.my-atropos');
  atroposComponent.addEventListener('enter', function() {
    console.log('Enter');
  });
  atroposComponent.addEventListener('leave', function() {
    console.log('Leave');
  });
  atroposComponent.addEventListener('rotate', function(event) {
    console.log('Rotate', event.detail);
</script>

取得實例

我們可以透過以下方式存取 Atropos 實例

const atroposComponent = document.querySelector('atropos-component');
const atroposInstance = atroposComponent.atroposRef;

控制元素偏移量

Atropos 使用特殊的 data- 屬性來控制元素偏移量（視差效果）

data-atropos-offset - 以百分比控制元素偏移量/平移。
例如
- data-atropos-offset="5" 表示元素在最大旋轉角度時將移動其大小的 5%。
- data-atropos-offset="-5" 表示元素在最大旋轉角度時將移動其大小的 -5%。
基本上，如果您希望元素看起來更近（位於場景的前面），則此值應為正數。如果您希望元素看起來更遠（位於場景的後面），則此值應為負數。
data-atropos-opacity - 控制元素的不透明度。
例如
- data-atropos-opacity="0;1" - 表示元素的不透明度將從 0（初始狀態）變為 1（最大旋轉角度）。
- data-atropos-opacity="0.1;0.8" - 表示元素的不透明度將從 0.1（初始狀態）變為 0.8（最大旋轉角度）。
- data-atropos-opacity="1;0" - 表示元素的不透明度將從 1（初始狀態）變為 0（最大旋轉角度）。

例如

<atropos-component>
  <!--
  Element with negative offset will move in reverse direction,
  making it appear behind the scene
  -->
  <img src="image-bg.png" data-atropos-offset="-5" />
  <!--
  Element with no offset will not move
  -->
  <img src="image-middle.png" data-atropos-offset="0" />
  <!--
  Element with positive offset will move in same direction,
  making it appear in front of the scene
  -->
  <img src="image-front.png" data-atropos-offset="5" />
</atropos-component>

下一步是什麼？

如您所見，將 Atropos 整合到您的網站或應用程式中很容易。以下是您的後續步驟

如果您有關於 Atropos 的問題，請在 StackOverflow 中提問，或使用 GitHub 討論區
如果您發現錯誤，請在 GitHub 上建立問題。