3Dアニメーションをさせるjavascriptライブラリには、three.jsがあります。three.jsを触ったことがある人はわかると思いますが、ちょっとしたことをやるだけでも面倒だったりするので、今回は、ちょっとだけ3D のアニメーションをつけたい場合などに利用できそうなztext.jsについての紹介をします。

特徴

  • CanvasやWebGLは不要
  • MITライセンス
  • 3Dの設定は、レイヤー数・奥行き・パースなどでスクリプトのオプションで簡単に設定
  • 必要なhtmlは、ztext側で自動生成してくれる
  • Vue.js, React.js向けのコンポーネントがある

さっそくデモ

See the Pen ztext.js Demo by kawashima@asb (@hidekazu-kawashima) on CodePen.

使い方

ダウンロードして、適切なパスを設定する　

<script src="/path/to/ztext.min.js"></script>

htmlは、こんな感じで記載する

<h1>
   <span data-z data-z-layers="3" data-z-depth="0.5em">A</span>
</h1>

対象となるセレクターを指定して、newするだけ

new Ztextify(selector, {})

詳しくは、ドキュメントを確認したください。

おわりに

今回は、3Dアニメーション系ライブラリ「ztext.js」を紹介しました。

ちょっとした3Dアニメーションの対応等で利用できる機会がありそうなので、機会があったら利用してみたいと思います。