AngularJSというライブラリを使ったタイプライターの入力のように文字を表示するデモ AngularJS ‘Typewriter’ Directive

AngularJSというライブラリを使ったタイプライターの入力のように文字を表示するデモ AngularJS 'Typewriter' Directive
このエントリーをはてなブックマークに追加
PR

AngularJS ‘Typewriter’ Directive
By António Capelo

http://codepen.io/capelo/pen/Bmbgn

AngularJSというのはmjQueryみたいな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

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)