Atropos 元素文档

浏览器兼容性

Atropos 兼容支持以下功能的浏览器

• 指针事件
• CSS 3D 变换
• CSS 过渡

安装

我们可以从 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;
}

组件属性

例如

<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 上创建问题，如果您发现了错误。