テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
Post on:2020年9月7日
sponsors
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。
日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。
ztext.jsの特徴
ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。
MITライセンスで、商用プロジェクトでも無料で利用できます。
テキストや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: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 |
<html> <body> ... コンテンツ ... <script src="ztext.min.js"></script> </body> </html> |
Step 2: HTML
ztextはdata-zまたはdata-z="true"属性を持つHTML要素を探し、それに3D効果を適用します。
|
1 2 3 |
<h1> <span data-z data-z-layers="3" data-z-depth="0.5em">A</span> </h1> |
上記のHTMLから、ztextは下記のようにコードを自動変換します。
|
1 2 3 4 5 6 7 8 9 |
<h1 data-z data-z-layers="3" data-z-depth="0.5em"> <span class="z-text"> <span class="z-layers"> <span class="z-layer">A</span> <span class="z-layer">A</span> <span class="z-layer">A</span> </span> </span> </h1> |
Step 3: JavaScript
スクリプトを初期化し、オプションを定義して実行します。
|
1 2 3 4 5 6 7 8 |
var ztxt = new Ztextify(".hero-text", { depth: "30px", layers: 8, fade: true, direction: "forwards", event: "pointer", eventRotation: "35deg" }); |
オプションなど、詳しい実装方法はドキュメントをご覧ください。
3Dに変換された要素は通常のテキストなので、CSSでスタイルしたり、アニメーションを適用することもできます。
テキストだけでなく、SVGや絵文字や画像も3Dにできます。
例えば、画像の場合は下記のようになります。
|
1 2 3 |
<span data-z data-z-depth="40px"> <img width="150" height="120" src="images/grace.jpg" alt="Photo of Grace"> <span> |
sponsors
