AngularJSというライブラリを使ったタイプライターの入力のように文字を表示するデモ AngularJS ‘Typewriter’ Directive
PR
AngularJS ‘Typewriter’ Directive
By António Capelo
http://codepen.io/capelo/pen/Bmbgn
AngularJSというのはｍjQueryみたいなjavascriptのコード入力を補助するようなものです、それを使ってタイプライターのように文字が入力されていくアニメーションを実装したデモです
タイプライターのように文字を入力するものはいくつか見たことが有るのですが、こちらのものは日本語にして崩れずに表示されます
日本語にしてやったみたバージョン
http://codepen.io/tatsuya/pen/lGIKq
text=”” の箇所の文字を変えれば好きな文字で表示させることが出来ます
type-delay=”” で文字が遅れて表示される速度を調整出来ます
blink-cursor=”” でカーソルの点滅をさせるかを決めれます
initial-delay=”” で文字の表示の開始までの時間の遅れを設定出来ます
cursor=”” でカーソル部分を文字に置き換えれます
blink-delay=”” でカーソルの点滅速度を決めれます
<p>タグにtypewriteとつけるだけでそれが対象になりますので他のタグでも可能かと思います
<p typewrite type-delay="100" blink-cursor="false" text="日本語の文字でも対応できるかテスト"></p>
このコードがベースになります使えます。あとは属性をつけたり消したりして調整できます
使ってみた感じ
普通にコードをそのまま利用できそうです
まずAngularJSものを今回初めて知りました
GitHubでのページ
https://github.com/antoniocapelo/AngularJS-Typewrite
PR
短縮URL:
COMMENT