更新日
文字を3Dにしてカーソルやスクロールにあわせて動かせる【ztext.js】
文字を3Dにしてカーソルやスクロールにあわせてグリグリ動かせるライブラリー、ztext.jsをご紹介します。キャッチコピーや目立たせたい部分に使ってみると良さそうですね！
この記事は動画でも紹介しています。動画派の方はぜひどうぞ！
動作デモ
こんな感じで、カーソルに合わせて文字が動きますよ！
ztext.js の実装方法
2 ステップだけでかんたん実装！必要であれば CSS の調整も行いましょう！
1. JavaScript ファイルを HTML に読み込ませる
まずは公式 Web サイトから ztext.min.js をダウンロードします。右クリックして「対象をファイルに保存」や「リンク先を保存」を選択し、ダウンロードしましょう。
続いてダウンロードしたファイルを html ファイルに読み込みます。閉じる body タグの前に読み込みのコードを記述します。
HTML
<body>
<script src="js/ztext.min.js"></script>
</body>
2. グリグリ動かしたい要素を用意
続いてグリグリと動かしたい要素を body タグ内に記述します。この例では h1 タグに「Hello」と書いておきました。
HTML
<body>
<h1>Hello!</h1>
<script src="js/ztext.min.js"></script>
</body>
3. JavaScript を記述
公式 Web サイトを見てみると実装方法が書いているので、マネして書いていきましょう。JavaScript ファイルを作成し、script.js などと名前をつけて保存します。今回動かしたい要素は h1 なので、タグ名で指定。オプションの 1 つである event を pointer とすることで、カーソルに合わせて動くようになります。
JavaScript
var ztxt = new Ztextify("h1", {
event: "pointer",
});
作成した JavaScript ファイルも読み込むことを忘れずに！
HTML
<body>
<h1>Hello!</h1>
<script src="js/ztext.min.js"></script>
<script src="js/script.js"></script>
</body>
4. お好みで CSS を調整
上記までのステップで動作はしますが、ちょっと装飾もしておきましょう。この例では文字色や文字サイズのみ変更しています。
CSS
h1 {
color: #05a;
font-size: 10rem;
}
これだけでかんたんな動作を加えられました！素敵ですね！
オプションいろいろ
いろんなオプションが用意されているので、自分好みにカスタマイズしてみましょう。
depth … 奥行き
depth で奥行き、影となる部分の大きさを指定できます。デフォルトでは 1rem になっています。100px にしてみると、結構奥行きができます。
JavaScript
var ztxt = new Ztextify("h1", {
event: "pointer",
depth: "100px",
});
奥行き部分の色を変える方法
このままだと影の部分の色がわかりづらいので、色を変えておきましょう。z-layer というクラスがスクリプトにより自動的に複製された要素なので、公式を真似して :not(:first-child) を使って色を加えるといいでしょう。「最初の z-layer クラス以外の z-layer クラス」に指定ができます。つまり一番上の層はそのままで、それより下にくる部分には色をつける、という意味ですね。
CSS
.z-layer:not(:first-child) {
color: #0bd;
}
いい感じに色がつきました！
layers … レイヤーの数
layers では同じ要素を何個重ねるかの指定ができます。奥行きの大きさや文字サイズにもよりますが、30 くらいに設定するとなめらかな奥行きを表現できました。
JavaScript
var ztxt = new Ztextify("h1", {
event: "pointer",
depth: "100px",
layers: 30,
});
これまでのデモ動画と比べると、奥行き部分の端がきれいなラインとなっています。
fade … ふんわりシャドウ
影の部分がカクカクっとした感じになっていますが、ふんわりとシャドウをつけたいときは fade オプションを使いましょう。真偽値なので、true としてみると奥行きの一番うしろにくる部分がふわっと消えているような感じになります。
JavaScript
var ztxt = new Ztextify("h1", {
event: "pointer",
depth: "100px",
layers: 30,
fade: true,
});
event … どう動かすか
ここまで event オプションの値を pointer にして、カーソルに合わせて動かしていましたが、他にもスクロールにあわせて動かす scroll という値も指定できます。スクロールにあわせて、中心部分に向かって傾くようになりますよ。
親要素にスクロールできるだけの高さや幅がないと動作しないので注意。この例では親要素の高さと幅を 2000px に指定して動作確認しています。
JavaScript
var ztxt = new Ztextify("h1", {
event: "scroll",
depth: "100px",
layers: 30,
fade: true,
});
CSS
body {
height: 2000px;
width: 2000px;
}
eventRotation … 傾く角度
数値と deg で傾く角度を指定できます。deg は degree（＝度）の略ですね。デフォルトだったら 30° だそうです。100° くらいで試してみるとかなりガチャガチャ動いちゃったので、デモでは 50° に設定しました。
JavaScript
var ztxt = new Ztextify("h1", {
event: "pointer",
depth: "100px",
layers: 30,
fade: true,
eventRotation: "50deg",
});
こういった動きをつけすぎるとページが見づらくなってしまうので、ほんの数カ所のみ、アクセントとして利用するといいですね。