http://inze.it/の仕組み

かなりクールなこちらのページですが、
http://inze.it/#references
仕組みが分かりません。
html5?
jquery?
csss?


添付画像を参考にして頂きたいのですが
真ん中の円グラフがスクロールとともに変化しますが
仕組みが分かりません、

見た印象ですが
１、レイヤー見たいに２層構造になっている？
２、背景と前景で移動スピードが違う？

どのようなテクニックで実現しているのでしょうか？
そして同じようなページを作る上でサンプルとか参考になる
サイトをどなたかお教え願います

No.2 回答者： ORUKA1951 回答日時： 2012/03/05 10:54

＞トップページindex.phpのようなかんじですが（index.htmlではないようです）

　拡張子は関係ないです。Windows使いですと理解できないかもしれませんが、HTTP応答ヘッダを見れば、content-type:text/html;のはずです。拡張子で動作を決めるのはWindowsだけです--それではまずいので、ブラウザは応答ヘッダを見て処理している。
　FirefoxにLive HTTP Headers( https://addons.mozilla.jp/firefox/details/3829 )
HTTP/1.1 200 OK
Date: Mon, 05 Mar 2012 01:48:41 GMT
Server: Apache/2.2.16 (Debian)
X-Powered-By: PHP/5.3.3-7+squeeze7
Set-Cookie: PHPSESSID=tm6v60a0gurt5f83vnc462og14; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 5853
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html　<----★


＞firefoxとFirebug
　で、そこいら当たりはわかるはずです。
<div class="pie"></div>
・・
style.css (1112 行目)
#value-static .pie {
　-moz-transform: rotate(180deg);
　background-color: #FFFFFF;
}

firefoxには、たくさんの
Firefox アドオン - 拡張機能 - 開発者向けツール | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/extensions/dev … )
があります。利用したらよいかと・・

No.1 回答者： ORUKA1951 回答日時： 2012/02/05 22:26

HTMLと、CSSですが？

firefoxとFirebugで確認できますけど・・・
-moz-transform: rotate(0deg);
とか・・・

HTMLは、HTML5ですが、HTML5で採用された、canvasとか、videoとかの新しい要素は一切使われていない・・スタイルシートはCSS3のものがいくつか使われています。

サンプルは、そのサイトのソースを見るのがよいかと・・
ただし、お使いのブラウザはHTML5対応のモダンブラウザだと思います。IEや他のブラウザでは、そのようにならないでしょう。i-phoneなどでは見れますが、大量のパケットが発生するのでお勧めしない。

この回答へのお礼

遅くなりましたすみません、

ソースをみて参考にしましたが、分かりませんでした、
ＣＳＳとか画像とかＷＥＢの階層ごとダウンロードして参考にしようと考えましたが
それもできませんでした、
トップページindex.phpのようなかんじですが（index.htmlではないようです）
ご意見有難うございました

お礼日時：2012/03/05 09:04