曲の長さにあわせてページ内容をスクロールさせる

説明

このサンプルはjQueryライブラリを使用しています。また、IEではjQuery部分でエラーとなり動作しません（1.3.2でエラーなので、より新しいものであれば解決している可能性があります）。また、MacOS X上で動くブラウザ以外は正しく動作しません。
曲の長さにあわせてページ内容をスクロールさせるにはページ全体をwrapInner()を使ってdivタグで囲みます。あとは、このdivタグをページの一番下に配置してからanimate()を使ってdivタグの最終位置を指定します。animate()の2番目のパラメータにアニメーションする時間をミリ秒で指定しますが、ここに曲の長さにあわせた秒数を指定すれば、ページ内容を曲に合わせてスクロールさせることができます。

サンプルプログラム

$(function(){
var wH = document.uniqueID ? document.body.clientHeight : window.innerHeight;
$(document.body).wrapInner('<div id="YSpageroll">');
$("#YSpageroll").css({ "position" : "absolute", "top":wH });
$("#YSpageroll").animate({ "top" : -parseInt($("#YSpageroll").css("height"))+"px" }, 116*1000);
})

サンプルを実行
[戻る]