Atropos React 文件

瀏覽器相容性

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

• 指標事件
• CSS 3D 變形
• CSS 轉場

安裝

我們可以從 NPM 安裝 Atropos

npm i atropos

樣式

首先，我們需要包含 Atropos 樣式表

<link rel="stylesheet" href="path/to/atropos.css" />

使用打包器（如 webpack），您可以直接從 JavaScript 導入樣式

// main.js

import 'atropos/css'

如果您使用 SCSS 預處理器，您可以透過以下方式從 SCSS 導入 Atropos 的樣式

// main.scss

@import 'atropos/scss'

Atropos 附帶不同格式的樣式表。以下檔案可用

• atropos.css（匯出為 atropos/css） - 所有 Atropos 樣式
• atropos.min.css（匯出為 atropos/css/min） - 壓縮的 Atropos 樣式
• atropos.scss（匯出為 atropos/scss） - SCSS 語法中的 Atropos 樣式
• atropos.less（匯出為 atropos/less） - LESS 語法中的 Atropos 樣式

元件用法

// import Atropos component
import Atropos from 'atropos/react';
  
export default function App () {
  return (
    <div id="app">
      {/* Atropos */}
      <Atropos className="my-atropos">
        {/* ... */}
      </Atropos>
    </div>
  )
}

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

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

元件屬性

例如

import Atropos from 'atropos/react';

export default function App () {
  return (
    <div id="app">
      <Atropos
        activeOffset={40}
        shadowScale={1.05}
        onEnter={() => console.log('Enter')}
        onLeave={() => console.log('Leave')}
        onRotate={(x, y) => console.log('Rotate', x, y)}
      >
        {/* ... */}
      </Atropos>
    </div>
  )
}

控制元素偏移量

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>
  {/* 
  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>

下一步是什麼？

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

• 如果您對 Atropos 有任何疑問，請在 StackOverflow 中提問，或使用 GitHub 討論區
• 如果您發現錯誤，請在 GitHub 上創建問題。