Atropos 要素ドキュメント

ブラウザ互換性

Atroposは、以下の機能をサポートするブラウザと互換性があります。

• ポインターイベント
• CSS 3D 変換
• CSS トランジション

インストール

AtroposはNPMからインストールできます。

npm i atropos

スタイル

Atroposコンポーネントのスタイルを設定するには、`part`属性を使用してコンポーネントのさまざまな部分をターゲットにしてカスタマイズできます。スタイルに使用できるパーツを以下に示します。

• scale: このパーツは、コンポーネントのスケーリングのためのコンテナを表します。このパーツにスタイルを適用して、スケーリング動作を制御できます。
• rotate: このパーツは、コンポーネントの回転のためのコンテナを表します。このパーツをターゲットにして、回転に関連するスタイルを適用できます。
• inner: このパーツは、コンポーネントの内部コンテンツを表します。このパーツをスタイル設定して、内部コンテンツの外観を変更できます。

atropos-componentの内部パーツをスタイル設定するためのCSSルールの書き方の例を以下に示します。

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をWebサイトやアプリに統合するのは簡単です。そのため、次の手順を示します。

• Atroposに関するご質問は、 StackOverflow または GitHubディスカッション
• バグが見つかった場合は、 GitHub で問題を作成してください。