タッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリ・「Atropos」

Atropos

Atroposはタッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリです。

PCではマウスホバーで、タッチデバイスではドラッグで動かす事が出来ます。非依存で軽量なので手軽に導入する事が出来ます。

<link rel="stylesheet" href="atropos.css" />
<script src="atropos.min.js"></script>
<script>
  const myAtropos = Atropos({
    el: '.foo',
  });
</script>

HTMLで必要なコンテナを作り画像を挿入します。

<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>

ドキュメントにはReactやVueもサポートされているみたいです。使う機会があるか分かりませんけど備忘録。ライセンスはMIT。

Atropos