iTMS風のインターフェイスをスタイルシートとjavascriptで再現

個人サイト「JAB-NETWORK」のCSS化に伴い、いろいろとインターフェイスの改善を試みている。

そんな中、先日オープンしたiTunes Music Storeで新作アルバムなどを紹介している横スクロールのインターフェイスを再現してみた。

この動き、よくよく考えるとMacOS XのDashboardでウィジェットを切り替えるインターフェイスとも似ているので、サイトではこのデザインを流用させて頂いた。

かなり制限はあるか一応形にはなったかな。

動作はこちらから

今回表示させている内容は、JAB-NET内のコンテンツに更新があればその写真をアップするようにしています。

JAB-NETはMovable Typeを利用していますが、トップページとこのコンテンツページは別のブログで扱っている為、コンテンツページでエントリーを作成する際にトップページのブログにトラックバックで写真のファイル名を飛ばして制御しています。

しかし、いつくか問題も発生。ここまでが自分の限界ですね。

①まず、左右のスクロールを本来は別々で制御させたかったが断念。
　Webで公開されていたフリーのソースからワンボタンで左右を交互に移動させるので精一杯でした。

②上記javascriptを外部ファイルとした場合に、DOCTYPE宣言と相性が悪いらしくFirefoxで動かなくなった。仕方が無いので、とりあえずDOCTYPE宣言を削除(悲）

これらの解決策があれば是非教えてください。