テキストやSVGや画像が3Dで動く!HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js

普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。

日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。

テキストやSVGや画像を3DにするJavaScriptテキストやSVGや画像を3DにするJavaScript

ztext.js
ztext.js -GitHub

ztext.jsの特徴

ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。
MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

ztext.js

テキストやSVGや画像の3D具合は、レイヤー数・奥行き・パースなどでスクリプトのオプションで簡単に設定できます。

サイトのキャプチャ

オプション

3D化されたテキストや画像は通常のテキストや画像と同じで選択可能で、アクセシブルです。日本語も問題なく、文中の一部を3D化することも可能です。

日本語にも対応

日本語にも対応

ztext.jsのデモ

デモではztext.jsで3D化されたテキストが楽しめます。

See the Pen
ztext.js test
by Bennett Feely (@bennettfeely)
on CodePen.

デモページで、テキストを日本語に変更したり、絵文字やSVG画像に変更して、遊べます。

ztext.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

ztextはdata-zまたはdata-z="true"属性を持つHTML要素を探し、それに3D効果を適用します。

上記のHTMLから、ztextは下記のようにコードを自動変換します。

Step 3: JavaScript

スクリプトを初期化し、オプションを定義して実行します。

オプションなど、詳しい実装方法はドキュメントをご覧ください。

サイトのキャプチャ

ztext.jsの使い方

3Dに変換された要素は通常のテキストなので、CSSでスタイルしたり、アニメーションを適用することもできます。

サイトのキャプチャ

要素のスタイル

テキストだけでなく、SVGや絵文字や画像も3Dにできます。

サイトのキャプチャ

テキスト以外もサポート

例えば、画像の場合は下記のようになります。

sponsors

top of page

©2020 coliss