申し訳ありませんが、私の JavaScript スキルは限られていますが、学習しようとしています。
scrollTop 計算を使用してスムーズなスクロール アニメーションを作成しようとしています。この場合、絶対に配置された div は幅 0 から始まり、互いの後ろに成長します。
説明しようとするフィドルを設定しました:
問題は、アニメーションが途切れ途切れで、特定のポイントで単純に間違っていることです。また、ブラウザを更新すると、div がまったく間違った場所で起動し、スクロールを開始すると元の位置に戻ります。
firebug では、計算が間違っていることが多く、スクロールしていないときでも停止しないようです。
$(document).ready(function() {
doStuff();
$(document).scroll(function() {
var levelScroll = $(document).scrollTop();
doStuff();
var show1 = $("#shaddow1").width();
var c1w = $("#circle1").width();
var div1W = $("#div1").width();
//div1
if(levelScroll>=0 && levelScroll<=200){
$("#div1").css("width", "0px");
$('#div1').css("margin-left", (-(div1W)/2));
$('#div1').css("margin-top", (-(div1W)/2));
}
else if(levelScroll>=200 && levelScroll<=500){
$("#div1").css("width", (levelScroll-200)+"px");
$('#div1').css("margin-left", (-(div1W)/2));
$('#div1').css("margin-top", (-(div1W)/2));
}
else if(levelScroll>=500){
$("#div1").css("width", "188px");
$("#div1").css("margin-left", "-94px");
$("#div1").css("margin-top", "-94px");
}
//circle1
if(levelScroll>=0 && levelScroll<=350){
$("#circle1").css("width", "0px");
$('#circle1').css("margin-left", (-(c1w)/2));
$('#circle1').css("margin-top", (-(c1w)/2));
$("#shaddow1").css("width", "0px");
$('#shaddow1').css("margin-left", (-(show1)/2));
$('#shaddow1').css("margin-top", (-(show1)/2));
}
else if(levelScroll>=350 && levelScroll<=650){
$("#circle1").css("width", (levelScroll-350)+"px");
$('#circle1').css("margin-left", (-(c1w)/2));
$('#circle1').css("margin-top", (-(c1w)/2));
$("#shaddow1").css("width", (levelScroll-300)+"px");
$('#shaddow1').css("margin-left", (-(show1)/2));
$('#shaddow1').css("margin-top", (-(show1)/2));
}
else if(levelScroll>=600){
$("#circle1").css("width", "232px");
$("#circle1").css("margin-left", "-116px");
$("#circle1").css("margin-top", "-116px");
$("#shaddow1").css("width", "232px");
$("#shaddow1").css("margin-left", "-116px");
$("#shaddow1").css("margin-top", "-116px");
}
});
});
function doStuff(){
var show1 = $("#shaddow1").width();
var c1w = $("#circle1").width();
var div1W = $("#div1").width();
$('#shaddow1').css("margin-left", (-(show1)/2));
$('#shaddow1').css("margin-top", (-(show1)/2));
$('#circle1').css("margin-left", (-(c1w)/2));
$('#circle1').css("margin-top", (-(c1w)/2));
$('#div1').css("margin-left", (-(div1W)/2));
$('#div1').css("margin-top", (-(div1W)/2));
}