PlusOne Blog

HPを作成していく上で、テキストを装飾して印象付けることは大事です。
そういったテキスト装飾で、おもしろいものを見つけたので紹介します。
　
テキストを３Dで表示するJavaScriptライブライ「ztext.js」です。
テキストを３D表示させるのはもちろん、マウスの動きにあわせて動かすこともできるユニークなライブラリです。

使い方はいたって簡単なライブラリになり、見た目がおっと思うものなので、ぜひ使ってみたくなるライブラリになります。また、バニラjsなのも嬉しいところです。
　
　
まず、公式サイトより「ztext.min.js」をダウンロードします。
ztext.js
　
HTMLで「ztext.min.js」を読み込みます。
【HTML】

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

　
HTMLで3Dにする要素を作成します。
【HTML】

<p class="demo">3D TEXT</p>

　
scriptを記述します。
【Script】

<script>
  var ztxt = new Ztextify(".demo", {
    depth: "100px",
    layers: 30,
    fade: true,
    direction: "both",
    event: "none",
    eventRotation: "35deg",
    perspective: "500px"
  });
</script>

Optionとして、下記パラメーターを設定できます。
・depth:z軸への深さ。％を除くすべての有効なCSS長の値を受け入れます。デフォルト：”1rem”
・layers:エフェクトを構成するレイヤーの数。デフォルト：10
・perspective:視点の距離を設定します。デフォルト：500px
・fade:テキストをフェードアウトさせます。デフォルト：false
・direction:効果が適用される方向。デフォルト：”both”
・event:JavaScriptでテキストの回転を制御します。デフォルト：”none”
・eventRotation:eventオプションが有効の場合、最大回転を設定します。デフォルト：”30deg”
・eventDirection:eventオプションが有効の場合、回転の方向を設定します。デフォルト：”default”


Option：eventでは、次のようなイベントを設定できます。このイベントにあわせてテキストを動かすことができます。
“pointer”mousemoveandtouchmoveイベントに応じてテキストを回転します。
“scroll” ウインドウのスクロールにあわせて回転させます。
“scrollX” ウインドウのX軸のスクロールにあわせて回転させます。
“scrollY” ウインドウのy軸スクロールにあわせて回転させます。

　
cssでテキストの傾きなどと設定します。
【CSS】

<style>
.demo{
  width: 100%;
  text-align: center;
  font-size:50px;
  color:#a3ffa3;
}
.demo .z-text {
  transform: rotateX(15deg) rotateY(-30deg);
}
.demo .z-layer:not(:first-child) {
  color: #000;
}
</style>