CSS3 transformを使ってhtml要素をぬるぬる動かしてみた

概要
CSS3のアニメーションプロパティを使えばdiv要素の絞込みや並び替えのアニメーションがCSSで書けますね。
ブラウザの対応状況はまちまちですし、ベンダープレフィックスがついており、まだまだ使いにくいです。

参考
transformについては↓こちらがわかりやすかったです。
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
http://kachibito.net/web-design/css3-transition-sample.html

CSS3 2D Transforms
http://www.w3schools.com/css3/css3_2dtransforms.asp

動きの確認は↓こちらが便利
http://www.westciv.com/tools/transforms/


サンプル

jsfiddleが便利なので、こちらにサンプルをあげました。

↑上のResultをクリックしてください。
リンククリック時およびウィンドウサイズ変更時に、ボックスを再描画します。



対象ブラウザはFirefoxとSafariとChromeです。
IEはTransformのアニメーションには今のところ対応していませんね。。
※ jqueryのanimationを使えば同じことは実装できます。

別窓でのデモページはこちら

ダウンロードは↓こちらから
https://github.com/ryooo321/div_float_box

つくり
画像は「data:image/jpeg;base64」でセット。
filterByNum()で各divの表示/非表示およびpositionを決定。
adjustTranslate()でスタイル設定。

Twitter widgetに似たものをつくってみた

twitter widgetについては↓こちら
Twitter/Widgets
http://twitter.com/about/resources/widgets/widget_profile
ブログパーツをさがせ : Twitter公式ウィジェット４種
http://satokoto.blog10.fc2.com/blog-entry-2296.html

こんなやつです。

このパーツは見ていて退屈しない。おもしろい。

自分のサービスでも こんなのあったら夢広がるよねー。

ということで似たようなものを作ってみました。

で、できたのは↓こちら

情報ひとつずつ下にスライドダウンしながら、表示していきます。

詳細は↓こちら

[用途]

継続的に登録される情報を、すべてのユーザーに対して見せたいようなコミュニティサービス向けのガジェットです。

[実装]

javascriptでjsonファイルを読み込んで、

jsonファイルに記載されている情報をタイムラインに一つずつ表示しています。

jsonファイルの中身をすべて表示したら、再びjsonを読み込んで、画面を閉じるまでループします。

[jsonイメージ]

{"nick_name": "hoge",

"user_attr":"（男性／20代／東京都）",

"user_url":"http://hogehogehoge.co.jp/",

"user_image":"img/image_bigger.jpg",

"message":"神奈川で資材運搬のヘリが墜落・炎上 機長が死亡 - テレビ朝日"

},

{"nick_name": "hoge♪",

"user_attr":"（女性／30代／愛知県）",

    ・

    ・

    ・

[利用ライブラリ]

本家はjqueryなど使わず独自のjsでやっていると思いますが、私はjqueryで実装しました。

jquery-1.4.2.min.js

http://jquery.com/

jquery.jsonp-2.1.4.min.js

http://code.google.com/p/jquery-jsonp/

[利点]

全ユーザーに同じ情報を見せるので、キャッシュやDBにリクエスト単位でアクセスしないという利点があります。

バッチで静的なjsonを生成すれば、全ブラウザは静的なjsonをロードできます。

そのためリクエスト数に対する耐性が高くAPI展開しやすい利点がありますね。

属性ごとにjsonを出しわけてjsで読み込むjsonを切り替えても面白いですね。

[ソース]

github

https://github.com/ryooo321/javascript_timeline_widget