金髪DEV

最近はモバイルアプリの企画・開発に携わっていたりします

jQueryでスクロールの量を取得する…パララックスサイトを作る準備。

２〜３年ぐらい前から当たり前のように実装されるようになったパララックスエフェクト（視差効果）ですが、近々それを利用したサイトを作ることになりそうなのでまずは簡単な下ごしらえから。

HTML（index.html）

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Parallax</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>スクロールの値を取得します</h1>
<p id="comment">現在のスクロール値<span id="scrollVal">0</span>px</p>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="scroll.js"></script>
</body>
</html>

CSS（style.css）

body{
	height: 3000px;
}

h1{
	position: fixed;
	text-align: center;
	width: 100%;
	top: 50%;
	margin-top: -50px;
}

#comment{
	position: fixed;
	text-align: center;
	width: 100%;
	top: 50%;
	margin-bottom: -10px;
}

JavaScript（scroll.js）

$(function(){
//スクロールされるたびにイベントが呼ばれます
	$(window).scroll(function(event) {
		//変数valにスクロールされた量が入ります
		var val = $("body").scrollTop();
		if(val < 0)val = 0;
		$("#scrollVal").text(val);
	});
})


完成品はこちらです。