ドキュメント

ブラウザの互換性

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

• ポインターイベント
• CSS 3Dトランスフォーム
• CSSトランジション

インストール

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

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をWebサイトまたはアプリに統合するのは簡単です。次のステップは次のとおりです。

• Atroposについて質問がある場合は、 StackOverflow または GitHub Discussions
• で質問してください。バグを見つけた場合は、 GitHub でIssueを作成してください。