文件

瀏覽器兼容性

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 樣式

HTML 佈局

現在，我們需要將基本的 Atropos 佈局添加到我們的應用程序中

<!-- main Atropos container (required), add your custom class here -->
<div class="atropos my-atropos">
  <!-- scale container (required) -->
  <div class="atropos-scale">
    <!-- rotate container (required) -->
    <div class="atropos-rotate">
      <!-- inner container (required) -->
      <div class="atropos-inner">
        <!-- put your custom content here -->
      </div>
    </div>
  </div>
</div>

初始化 Atropos

現在我們需要初始化 Atropos

// import Atropos library
import Atropos from 'atropos';

// Initialize
const myAtropos = Atropos({
  el: '.my-atropos',
  // rest of parameters
});

如果您在沒有 ES 模塊的環境中使用它，您可以通過 <script> 標籤添加 Atropos 庫

<script src="path/to/atropos.min.js"></script>
<script>
  const myAtropos = Atropos({
    el: '.my-atropos',
    // rest of parameters
  });
</script>

如果您直接在瀏覽器中使用模塊，則可以從 CDN 導入它

import Atropos from 'https://cdn.jsdelivr.net/npm/atropos@2/atropos.min.mjs';

const myAtropos = Atropos({
  el: '.my-atropos',
  // rest of parameters
});

除了 Atropos 的主要 CSS 樣式外，我們可能還需要添加一些自定義樣式，例如設置 Atropos 大小

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

參數

例如

const myAtropos = Atropos({
  el: '.my-atropos',
  activeOffset: 40,
  shadowScale: 1.05,
  onEnter() {
    console.log('Enter');
  },
  onLeave() {
    console.log('Leave');
  },
  onRotate(x, y) {
    console.log('Rotate', x, y);
  }
});

實例屬性

初始化 Atropos 後，我們將獲得其初始化的實例，其中包含一些有用的方法和屬性

例如

// init Atropos
const myAtropos = Atropos({
  el: '.my-atropos',
  activeOffset: 40,
});

setTimeout(() => {
  // destroy it when needed
  myAtropos.destroy();
}, 10000)

控制元素偏移

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（最大旋轉角度）。

例如

<div class="atropos">
  <div class="atropos-scale">
    <div class="atropos-rotate">
      <div class="atropos-inner">
        <!--
        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" />
      </div>
    </div>
  </div>
</div>

接下來是什麼？

如您所見，將 Atropos 集成到您的網站或應用程序中很容易。所以這裡是您的下一步

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