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

質問

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

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

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

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

回答No.2

ORUKA1951

＞トップページ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/developer_tools/ )
があります。利用したらよいかと・・

回答No.1

ORUKA1951

HTMLと、CSSですが？

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

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

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

お礼

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

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