info

category : JavaScript
[CSS3]trickart on CSS3  @ JavaScript , CSS3 + CSS 2010年3月15日

CSS3を始めて2週間が経ちました。
[Papervision3D]TrickArtのCSS3バージョンです。
2Dっぽいけど実は3Dだった というものです。
これだけ画像使うとさすがにちょっと重いか。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

画像クリック:カメラ移動

trickart on CSS3


さて、次は何を作ろうか。

[CSS3]skew  @ JavaScript , CSS3 + CSS 2010年3月10日

CSS3を始めて10日が経ちました。
CSS3では新しいプロパティが追加されていますが、
その中のskewプロパティを活かしたものを作ってみました。
jQueryなどのライブラリを使わず全て自作しました。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

ステージでマウスホイール:カメラ上下
円柱上でマウスホイール:円柱回転

skew


CSS3で3Dにする場合
transform-styleの値をpreserve-3dにして、
rotateYを変化させれば立体的に回転してくれます。
しかし、カメラが動くことを想定して、パースを合わせるためにoriginYの値を
3D処理毎に変化させると これがまた重い。異常に重い。
こんな感じになる。preserve-3dバージョン
そこで今回は、skewとrotateに同じ値を入れると縦方向にシアーがかかるので
これを利用してパースをつけています。
3D座標から2D座標にプロットするやり方はこちらのエントリーを。

さて、次は何を作ろうか。

[CSS3]scale  @ JavaScript , CSS3 + CSS 2010年3月8日

CSS3を始めて一週間が経ちました。
新しく手に入れたおもちゃのようにCSS3で遊び続けています。
CSS3では新しいプロパティが追加されていますが、
その中のscaleプロパティを活かしたものを作ってみました。
画像の拡大縮小がとてもスムーズ、動作も軽くてとても良いですね。
jQueryなどのライブラリを使わず全て自作しました。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

マウスホイール:ズームインアウト
ドラッグ:日本移動

scale


さて、次は3Dかな?

[CSS3]rotate  @ JavaScript , CSS3 + CSS 2010年3月3日

CSS3を始めて3日が経ちましたので早速一つ公開します。
CSS3では新しいプロパティが追加されていますが、
その中のrotateプロパティを活かしたものを作ってみました。
jQueryなどのライブラリを使わず全て自作しました。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

文字の上の丸をドラッグ:移動

rotate


さて、次は3Dにしてみようかな~

[JavaScript]JS like flash  @ JavaScript 2010年3月1日

ajaxでどこまでflashっぽくできるのか。
前回、前々回のエントリーはこのための開発でした。
今回モデルとしたflashはau design projectneonです。
jQueryなどのライブラリを使わず全て自作しました。

※第2弾[ajax]ajax like flash #02

ajax like flash


WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE6,7(png8画像は劣化)
GoogleChrome4.0.249.78 (36714)
SRWare Iron4.0.280
Safari4.0

この制作で習得したことや感想
・工数はflashで作るときと同じかそれ以上
・ブラウザごとのチェック、調整が大変
・flashに比べて後からの変更に弱い
・FlashPlayerって実はすげー
OS、ブラウザを気にしなくてよい
画像系の処理スピードは圧倒的
・タイムラインって概念も実はすげー
アニメーションを作りやすい
処理のタイミングを調整しやすい
・IEは駄目な子
・クロージャの使い方
・レキシカルスコープを理解
・flashの自作クラスを多数移植
・visibilityプロパティはブラウザごとに調整がいる
・IEは駄目な子
・画像をCSSでリサイズするとChromeとIronがやたら重い
・IEだけsetIntervalのスピードが遅い
・CSSのプロパティ名はIEだけ違うものもある

さて、次はCSS3行ってきます。

[JavaScript]fill up  @ JavaScript 2010年2月24日

3時間くらいでササッと作ったものなんで
生暖かい目で見てください。
jQueryなどのライブラリを使わず全て自作しました。
元ネタはこちら

左が重い方は右へ

flash/other/13/ flash/other/14/r

応用編
四角クリック:対象矩形を fill up

追記:応用編2
縦横複合

[JavaScript]ScrollBar on javascript  @ JavaScript 2010年2月4日

javascriptです。

地味です。
ブラウザのスクロールバーを使えばいいのでは?なんてことは言わないように。
クロージャとか画像のドラッグ処理の仕方とかを習得できました。
今Ajaxで作っている作品に搭載しようとした一機能でしかないので
生暖かい目で見てください。
jQueryなどのライブラリを使わず全て自作しました。

上部サムネクリック:対象画像までスライド
マウスホイール:スライド
バードラッグ:ドラッグ
バーを投げる:飛んでく


スクリーンショット1

ScrollBar on javascript

WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE7
GoogleChrome4.0.249.78 (36714)
Safari4.0

[JavaScript]maru on ajax  @ JavaScript 2010年1月3日

ajaxです。

marunouchi.com的なものを作ってみました。
jQueryなどのライブラリを使わず全て自作しました。

ブラウザウィンドウリサイズ:並び替え
リンクマーク付き画像クリック:リンク先へ
リンクマーク無し画像クリック:拡大画像表示


スクリーンショット1

maru on ajax

[JavaScript]XMB on JS  @ JavaScript 2010年1月2日

ajaxです。

クロスメディアバー的なものを作ってみましたが
pcはマウスがあるのであんま使えね
jQueryなどのライブラリを使わず全て自作しました。

追記:Firefoxでホイールが効かなかったのを修正しました。

マウスホイール:サムネイルスライド


スクリーンショット1

XMB on ajax