任意のテキストを自動で3D化するスクリプト・「ztext.js」

ztext.js

ztext.jsは任意のテキストを自動で3D化するスクリプトです。上デモのように見た目に加えてマウスの動きに応じた視差効果も付与してくれます。

仕組みとしては割とシンプルで、指定された設定を元に複数レイヤーを複製して3Dに見せている、という感じ。

デモは設定が下手で微妙な感じになっていますので本スクリプトサイトのサンプルを見た方が良いかもしれません。

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

まず、スクリプトを読み込みます。非依存型なので他のスクリプトは不要です。

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

HTML要素で制御する場合は上記のようにカスタムデータ属性で制御します。この場合、以下のように展開されます。

<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>

このように複数のレイヤーを複製して3D化を実現しています。

var ztxt = new Ztextify(".hero-text", {
   depth: "30px",
   layers: 8,
   fade: true,
   direction: "forwards",
   event: "pointer",
   eventRotation: "35deg"
});

また、JavaScriptによる制御も可能です。

また、SVGや画像などの3D化も可能となっていますのでそこまで利用シーンが少ないわけでもないかもしれませんね。

機会がありそうなら触ってみては如何でしょうか。ライセンスはMITです。

ztext.js