CodePen.ztext.jsは任意のテキストを自動で3D化するスクリプトです。上デモのように見た目に加えてマウスの動きに応じた視差効果も付与してくれます。仕組みとしては割とシンプルで、指定された設定を元に複数レイヤーを複製して3Dに見せている、という感じ。デモは設定が下手で微妙な感じになっていますので本スクリプトサイトのサンプルを見た方が良いかもしれません。src="ztext.min.js"></script>まず、スクリプトを読み込みます。非依存型なので他のスクリプトは不要です。data-z-depth="0.5em">A</span></h1>HTML要素で制御する場合は上記のようにカスタムデータ属性で制御します。この場合、以下のように展開されます。</span></h1>このように複数のレイヤーを複製して3D化を実現しています。"35deg"});また、JavaScriptによる制御も可能です。SVGや画像などの3D化も可能となっていますのでそこまで利用シーンが少ないわけでもないかもしれませんね。機会がありそうなら触ってみては如何でしょうか。ライセンスはMITです。Gravはデータベース不要のオープンソースなCMSです。Resource勉強した本[PR]タイトルとURLをコピーしました。