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。
