info

category : CSS3 + CSS
[CSS3]iPhoneのホーム画面の動きをCSS3+jsで  @ JavaScript , CSS3 + CSS , jQuery 2011年12月2日

iPhoneのホーム画面の動きを2つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。

サンプルCSS3 animation

サンプルCSS3 jQuery.animate of translate

[CSS3]animationの動的生成  @ JavaScript , CSS3 + CSS 2011年11月28日

タイトル通り
四角がクリックした座標へCSS3のanimationを使って移動します。
Firefox,Chrome,Safari,iPhoneで動きます
jQueryプラグインで既にあるようですが後学のために。
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]

サンプルdynamic_css3

参考にしたサイト
CSS3リファレンス
 

[JavaScript]JS like flash #02  @ JavaScript , CSS3 + CSS 2010年9月13日

ajaxでどこまでflashっぽくできるのか第2弾。
今回モデルにしたのは「なにかにキクぜ。グラソー ビタミンウォーター」です。
第1弾はこちら ajax like flash #01

CSS3を使っているのでブラウザによって動作が異なります。
GoogleChrome6.0.472.55(完璧に動作)
SRWareIron4.0.280(完璧に動作)
Safari4.0.5(完璧に動作)
Firefox3.6.2(3D回転無し)
IE8(2D回転3D回転無し)

ajax like flash #02

[CSS3]interface4 on CSS3  @ JavaScript , CSS3 + CSS 2010年3月24日

ええ、そうです。お察しの通りネタ切れです。

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

右リング上でマウスホイール:リング回転
右リング以外でマウスホイール:リング前後

interface4 on CSS3


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

[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かな?