2020年08月29日(土)
任意のテキストを自動で3D化するスクリプト・「ztext.js」
ztext.js
See the Pen ztext.js test by kachibito
(@kachibito) on CodePen.
ztext.jsは任意のテキストを自動で3D化するスクリプトです。上デモのように見た目に加えてマウスの動きに応じた視差効果も付与してくれます。仕組みとしては割とシンプルで、指定された設定を元に複数レイヤーを複製して3Dに見せている、という感じ。
デモは設定が下手で微妙な感じになっていますので本スクリプトサイトのサンプルを見た方が良いかもしれません。
Adsまず、スクリプトを読み込みます。非依存型なので他のスクリプトは不要です。
A
HTML要素で制御する場合は上記のようにカスタムデータ属性で制御します。この場合、以下のように展開されます。
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『任意のテキストを自動で3D化するスクリプト・「ztext.js」』についてまとめています。
この記事は特にレスポンシブ・javascript・SVG・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
0
1
3
3
