webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

コメントの投稿













管理者にだけ表示を許可する
 

MSのイベントMIX11で紹介されたSVG女子が凄まじい

svg_girl_top_e98_001.png

IE9では、HTML5やCSS3などWEB標準化に加えて、GPUレンダリングのよる描画処理が向上しました。MIX11で紹介されたSVG女子は、SVG(Scalable Vector Graphics)のみを使って描画されたアニメーションです。IE9が、WEB標準化へ進化したことが伺えます。
制作したのは、常にユニークなアイデアでWEB業界を沸かせてくれる面白法人カヤック(http://www.kayac.com/)です。
SVG技術は、かなり前からあったもののWEBの描画にはあまり使われていませんでした。というのもIE8までは、SVGに対応していなかったのです。注目され始めたのは、IE9がSVGに対応するといわれた頃でしょうか。
今回のイベントで機能的に実証され、今後一層、注目されそうです。

SVGは、テキストベース(XML)にて、画像を描画する方式なので、JSやCSSなどから内容を書き換えることが可能です。下記のシンプルモードを利用してみるとわかるように、SVG画像の各パーツを自分の好きな色に変更することができます。インタラクティブなコンテンツを作るには、こちらの方が都合がよさそうですね。

■SVGアニメーション シンプルモード
http://jsdo.it/event/svggirl/edit/color


制作者のブログにちょこっと内部実装が書かれていました。イラストレータで書いた画像をそのままSVGにはくと未圧縮状態で150MB以上で、読み込みに3分、読み込み後のメモリ使用量は1.2GBを超えらしいです。ネットブックとかでやるとブラウザ固まりそうです。最終的に、40Mになったみたいです。私の使っているPCでは、メモリ使用量が350Mくらいでした。


■制作した中の人のブログ -SVG Girlの公開と内部実装-
http://tech.kayac.com/archive/svg_girl.html



■SVG女子

ではさっそくアニメーションを見てみてください! chromeとかfirefoxでも動きますが、せっかくのIE9のイベントなのでIE9インストールしましょう~

IE9インストール
http://windows.microsoft.com/ja-JP/internet-explorer/products/ie/home

SVGアニメーション
http://jsdo.it/event/svggirl/

svg_girl_entry_e98_002.png

■SVGアニメーション ① 
svg_girl_entry_anime_e98_003.png


■SVGアニメーション ②
svg_girl_entry_anime_e98_004.png


■SVGアニメーション ③
なんかもう凄すぎです。「え~?え~?うぉ~~~~~~~」ってなっちゃいます。
svg_girl_entry_anime_e98_005.png

■SVGアニメーション ④
svg_girl_entry_anime_e98_006.png



■SVG女子 コンテスト

SVG女子の公開に合わせて、カヤックのコンテンツであるjsdo.it上でコンテストを開催するようです。お題は「SVG大喜利」と「SVG神モード」の2つです。募集期間は、4月26日~5月25日の間で、6月1日に結果発表があります。
大喜利のほうは、用意されたSVG女子のコードを改変してオチをつけるというものです。もう既に面白いのが投稿されていました。私も何か思いつけば投稿したいです。
次に、SVG神モードです。これは、MIX11で紹介された動画の最初の部分のアニメーションコードが与えられて、オリジナルのSVG女子を作るというものです。どんな作品が投稿されるのか楽しみです。

■SVG 神モード
svg_girl_entry_e98_007.png

■SVG 大喜利
svg_girl_entry_e98_008.png



アニメーション凄すぎワロタ~
あ~自分の好きなもの作る時間がほしいです。と記事でつぶやいてみる

Comment

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

 
Other Links
 
 
 
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。