DDT両国

DDT両国見てきた。
けが人多くて残念だが、パッケージとしての全体の完成度が高かったのか、非常に楽しめた。
マイケル大活躍だった。

Error: Suspended

学プロ見てきた

学生プロレス見てきました。
くだらなすぎて最高です!

jQuery.cross-slide で画像にアニメーション効果をつける

画像のスライドショーというか、Flash使わずにちょっとカッコよくとか、そんなの。
http://tobia.github.com/CrossSlide/

指定はちょいわかりにくいけど、定番セット作っておけば毎回指定するとかもないような気がする。
そして、jQueryがかなり新しめじゃないと(確認したのは1.4.2)動作しないみたいで最初ハマった。
GoogleのCDN使うとjQuery 1.3.1が最新かと思いきや、1.4.2指定したら出来た。

そんなこんなで下記のような感じで指定。

1
2
3
4
5
6
7
8
9
<div id="slide" style="height: 150px; width: 300px;">Loading...</div>
<script type="text/javascript">// <![CDATA[
    jQuery('#slide').crossSlide(
        { fade: 2 }, [
        { src: 'images/a.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 2 },
        { src: 'images/b.jpg', from: 'top left', to: 'bottom right 1.8x', time: 2},
        { src: 'images/c.jpg', from: '100% 80% 2x', to: '80% 0% 1x', time: 2}
    ]);
// ]]></script>

<div>とかであらかじめ縦・横サイズは決めてあげる。
そしたら、画像サイズもそれ以上のサイズで用意。

fromとかtoで画像の表示部分をCSSのルールに従って位置を決めつつ、1xとか1.5xで拡大率を指定、timeはアニメーションする時間、fadeはクロスフェードの時間です。
単なる画像のクロスフェードよりは、少し表現が豊かになった気がします。

ちなみにiPhoneでも動作確認しました。
まあ、1ページに1つとかにしないと重いです。

追記 2011.04.06
ここまで派手ではないですが、単なるフェードイン・フェードアウトのスライドショーのサンプルを作ってみました。参考までにドウゾ。
jQueryゼロから / スライドショー

HTML5 / 06. RichText

久々に勉強の続き。

<div contenteditable=”true”>…</div>とすればtextareaじゃなくても、内容を変更可能に出来る。
contenteditable=”false”で不可設定も。
designMode=”on”でDocumentまるごと編集可にしたり、iFrameごと編集可にもできるらしい。

さらに、document.execCommand() でいくつか用意されたWYSIWYGぽい操作を可能にできる。
bold, CreateLink, delete, FormatBlock,… とかとか。(詳しくはコチラ)
document.execCommand(‘bold’) とかなら、ボタンクリックで選択した文字列を太字に出来る。

ただ、これまたブラウザによって実装はまちまち。
firefoxなら引数が必ず3つ必要で execCommand(‘bold’, false, false) にするとか。
動かないものもあったりとか。(こちらでざっくり確認できます)

WYSIWYGエディタ作らなきゃとかじゃない限り、しばらくはTinyMCEとかがイイのかな。

Error: Suspended

ディズニー・シー

初めて行ったわ、シー。
あいにくの天気のおかげであんまり並ばなかった。

さすがにひとつひとつがよく出来ていて、関心するわ〜
写真はくらげ。