文字を3Dにしてカーソルやスクロールにあわせて動かせる【ztext.js】
文字を3Dにしてカーソルやスクロールにあわせてグリグリ動かせるライブラリー、ztext.jsをご紹介します。キャッチコピーや目立たせたい部分に使ってみると良さそうですね！
↑私が10年以上利用している会計ソフト！
この記事は動画でも紹介しています。動画派の方はぜひどうぞ！
動作デモ
See the Pen
ztext.js demo by Mana (@manabox)
on CodePen.
こんな感じで、カーソルに合わせて文字が動きますよ！
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'
});
See the Pen
ztext.js demo by Mana (@manabox)
on CodePen.
こういった動きをつけすぎるとページが見づらくなってしまうので、ほんの数カ所のみ、アクセントとして利用するといいですね。
