Atropos React ドキュメント

ブラウザ互換性

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スタイル

コンポーネントの使用法

// import Atropos component
import Atropos from 'atropos/react';
  
export default function App () {
  return (
    <div id="app">
      {/* Atropos */}
      <Atropos className="my-atropos">
        {/* ... */}
      </Atropos>
    </div>
  )
}

AtroposのメインCSSスタイルに加えて、Atroposのサイズを設定するなど、カスタムスタイルを追加する必要がある場合があります。

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

コンポーネントプロパティ

例

import Atropos from 'atropos/react';

export default function App () {
  return (
    <div id="app">
      <Atropos
        activeOffset={40}
        shadowScale={1.05}
        onEnter={() => console.log('Enter')}
        onLeave={() => console.log('Leave')}
        onRotate={(x, y) => console.log('Rotate', x, y)}
      >
        {/* ... */}
      </Atropos>
    </div>
  )
}

制御要素のオフセット

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>
  {/* 
  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>

次のステップ

ご覧のとおり、AtroposをWebサイトまたはアプリに簡単に統合できます。以下は次のステップです。

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