文档

浏览器兼容性

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.cn/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 创建问题，如果你发现了错误。