HOME > Javascript > パララックスサイトの基本的な作り方 1/2！

パララックスサイトの基本的な作り方 1/2！

Javascript

2014/06/11

こんにちは〜！
今回はパララックスサイトの基本的な作り方を紹介したいと思います。

去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。
そんなパララックスサイトの基本的な作り方です。

パララックス（視差効果）とは

パララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。

パララックスサイトの基本的な作り方 1/2！

準備をしよう！

htmlを用意します。
jQueryはjQueryのサイトから直接読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パララックスサイト１</title>
</head>
<body>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>

スクロールした値を取得してみよう！

スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スクロールの値を取得</title>
<link rel="stylesheet" href="css/scroll.css">
</head>
<body>
	<h1>スクロールの値を取得</h1>
	<p class="num">スクロールの値 | <span id="scrollValue">0</span></p>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>

css

body {
	height: 5000px;
}
.num {
	margin: 0;
	position: fixed;
	right: 10px;
	top: 10px;
}

js

$(function() {
	$(window).scroll(function() {
		var value = $(this).scrollTop(); //スクロールの値を取得
		$('#scrollValue').text(value);
	});
});

DEMO

スクロールをすると右上の数値が大きくなると思います。

ボックスを別々に動かしてみよう！

取得したスクロールの値を使ってボックスを別々に動かしてみます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボックスを別々に動かす</title>
<link rel="stylesheet" href="css/parallax1.css">
</head>
<body>
	<h1>ボックスを別々に動かす</h1>
	<p class="num">スクロールの値 | <span id="scrollValue">0</span></p>
	<div id="box1" class="box"></div>
	<div id="box2" class="box"></div>
	<div id="box3" class="box"></div>
	<div id="box4" class="box"></div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/parallax1.js"></script>
</body>
</html>

css

body {
	height: 5000px;
}
.num {
	margin: 0;
	position: fixed;
	right: 10px;
	top: 10px;
}
.box {
	position: fixed;
	top: 90px;
	width: 100px;
	height: 100px;
}
#box1 {
	background: #fe2902;
	left: 10px;
}
#box2 {
	background: #fe7833;
	left: 120px;
}
#box3 {
	background: #feb468;
	left: 230px;
}
#box4 {
	background: #fee09c;
	left: 340px;
}

js

$(function() {
	var top = $('#box1').offset().top; //初期値を取得
	$(window).scroll(function() {
	    var value = $(this).scrollTop(); //スクロールの値を取得
	    $('#scrollValue').text(value);

	    $('#box1').css('top', top + value / 2);
	    $('#box2').css('top', top + value / 4);
	    $('#box3').css('top', top + value / 6);
	    $('#box4').css('top', top + value / 8);
	});
});

DEMO

取得したスクロールの値に計算処理を加えてボックスのスピードを変えています。

今回はここまでです。
次回はもう少し応用したサンプルを作っていきます。