横からフェードイン1

$(window).scroll(function () { // スクロールしたら
console.log(this); // window
console.log($(this).scrollTop()); // windowのスクロール量Y軸
console.log($(window).height()); // windowの高さ
console.log($("div").eq(1).offset().top); // #div2のY座標
			
var windowBottom = $(this).scrollTop() + $(window).height() - 100; // windowのスクロール量 + windowの高さ - 100 
	var div2Top = $("div").eq(1).offset().top; // #div2のY座標
	var div3Top = $("div").eq(2).offset().top; // #div3のY座標
	var div4Top = $("div").eq(3).offset().top; // #div4のY座標
				
	if (div2Top <= windowBottom) {
		$("div").eq(1).animate({"right" : 0}, 1500);
	}

	if (div3Top <= windowBottom) {
		$("div").eq(2).animate({"left" : 0}, 1000);
	}

	if (div4Top <= windowBottom) {
		$("div").eq(3).animate({"right" : 0}, "normal");
	}
});

windowの底辺座標は$(window)のてっぺんから見て$(window).height()と表現できる。
スクロールするとその分ずつ底辺座標も動くので、
$(window).scrollTop() + $(window).height()
と表現できる。



インデックスに戻る