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アニメーションの対応等で利用できる機会がありそうなので、機会があったら利用してみたいと思います。