githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。
ドキュメント・サンプルは以下のリンク先を参考にしてください。（変な英語ですけど、なんとなく言いたいことは分かると思います。
日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ！っていう方は見てみてください。
特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。
要望とかバグ報告などはgithubのIssuesへお願いします。
元ネタ
これおもしろいなーと思って、でもすごい重くて・・・ｗよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん
↓ サンプル
HTMLは超絶シンプル
CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で
marquee {
position: relative;
color: #ffab00;
background-color: #0a0600;
font-size: 40px;
}
marquee:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px),
linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
-webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
-moz-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
-o-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
-ms-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px, 2px 2px;
z-index: 10;
}
IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど
ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた
jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it
forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS
追記：なんかやっぱり一部環境で重くなるときがあるらしい
また紹介エントリーか。。。Sass布教活動の一貫です。どうも。
SassとかLESSって使ってますか？書くのがとても億劫なCSS（個人の感想です）を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります（個人の感想です）。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。
というか
をみてください。
そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。
ではSassをインストールしましょう！OS Xの方はターミナルを開いて
$ gem install sass
を入力するとしばらくしてSassがインストールできるので、
$ mkdir ~/Sites/my-first-sass $ mkdir ~/Sites/my-first-sass/styles $ mkdir ~/Sites/my-first-sass/styles/scss $ cd ~/Sites/my-first-sass/styles $ touch scss/style.scss $ sass --watch scss/style.scss:style.css
で、まずはコンパイルしてみまｓ・・・
なるほどですね。特にSassは黒い画面じゃないとだめみたいな先入観があるのではないでしょうか？
それがCodeKitです。
Winのことはよくわからないので、同じような事を誰かが書いてくれるでしょう。フロントエンドの制作でOS Xじゃない方が弊害が多い気がしますけど、個人の感想ですね。
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です
以下、見たことのある内容が続きます
全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです
Chromeにビルトインされてるのですぐ使えます。
ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。
通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと
右下にギアアイコンがあって、そこからインスペクタのSettingが開けます
すると Override User Agent という項目があるので
チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます
試しに iPhone – iOS5 を選択してみましょう
リロードするとUAが変わっているのが分かります（分かるページでやると
※書き忘れてましたが、インスペクタが開いている状態でのみ有効です
今さらなんでもないメソッドですけど、せっかく作ったので記事書いておきます。対象要素内のテキストを一文字ずつ表示するだけです。
最初に $.typewrite(jQueryオブジェクト) で初期化しておきます。あとは任意のタイミングで .play() メソッドでエフェクトを実行できます。
.play(4) のように実行時に duration を決めることもできます。
.play() メソッドは jQuery Deferred オブジェクトを返すので、完了時に何かしたいときは .done() でつなげばOKです。
var typewrite1 = $.typewrite($('#typewrite1'));
$('#do_typewrite1').click(function() {
typewrite1.play();
});
This is typewrite
var typewrite2 = $.typewrite($('#typewrite2'), {
duration: 2,
hide: false,
end: '|'
});
$('#do_typewrite2').click(function() {
typewrite2.play().done(function() {
alert('completed');
});
});
This is typewrite
This is typewrite
jQuery プラグインとして使う場合は、play() メソッドが typewritePlay() メソッドに変わります。
var typewrite4 = $('#typewrite4').typewrite({
end: '|'
});
$('#do_typewrite4').click(function() {
typewrite4.typewritePlay(2);
});
| オプション | 説明 |
|---|---|
| duration | エフェクトが始まってから終わるまでの時間。1(s)のように秒で指定 (def 1 |
| hide | 初期化時にテキストを隠すかどうか (def true |
| end | 入力カーソルを指定できます (def _(underscore) |
| wait | ハッシュで対象の文字と待ち時間を渡すとその文字のときに余分に待つ（次の項へ |
デフォルトは日本語の4文字だけ指定してるので変えてください
| 文字列 | 待ち時間 |
|---|---|
| ！ | 0.1 |
| ？ | 0.1 |
| 、 | 0.1 |
| 。 | 0.1 |
指定するときはこんな感じで
$.typewrite(hoge, {
wait: {
',': 0.3,
'.': 0.3
}
});
対象の要素は、