パララックスサイトの作り方

SONY DSC

 

 
パララックスサイト作成の基本的な考え方を勉強したので備忘録。

最近、カフェとか飲食店でこういうレイアウトのサイト見かけますね。
※「CURVY GROUND Kitchen

 

作ったデモサイト

こんな感じです。
 
 

html, cssで要素を作る。

html, cssで基本的なひな形を作ります。

 

divで背景画像ごとの要素を作る。

	<div id="bg1" class="box"></div> 
	<div id="bg2" class="box"></div> 
	<div id="bg3" class="box"></div> 
	<div id="bg4" class="box"></div> 
	<div id="msg" class="box">Chefchaouen</div> 

各要素をdivで囲み、背景画像ごとのidと共通スタイル設定のためのclassを記載します。

 

bodyとdiv内のid, classのスタイルを設定する。

body {
  margin:0;
  padding:0;
  height:4000px;
  background: #f5f5f5;
}

bodyのmargin, paddingを0にして、heightを十分な値(画像全体分のheightを足し合わせた数以上)に設定します。
 

#bg1 { background:url("../images/001.jpg") no-repeat; }
#bg2 { background:url("../images/002.jpg") no-repeat; }
#bg3 { background:url("../images/003.jpg") no-repeat; }
#bg4 { background:url("../images/004.jpg") no-repeat; }
#msg {
  font-size:48px;
  font-weight:bold;
  font-family;"Open Sans",Calibri,Candara,Arial,sans-serif;
  color: blue;
  opacity: 0;
  position: fixed;
}

背景画像を用意してdiv要素の背景に設定します。
(width=1280px, height=852pxの画像を用意)
 

スクロール値を取得して背景画像を固定する。

 

$(function() {
	$(window).scroll(function() {
		var dy = $(this).scrollTop();

		$("#bg1").css("background-position-y", dy);
		
		if (dy > 852) {
			$("#bg2").css("background-position-y", dy-852);
		} else {
			$("#bg2").css("background-position-y", 0);
		}
		
		if (dy > 1704) {
			$("#bg3").css("background-position-y", dy-1704);

		} else {
			$("#bg3").css("background-position-y", 0);					
		}

		if (dy > 2556) {
			$("#bg4").css("background-position-y", (dy-2556)*2);
		} else {
			$("#bg4").css("background-position-y", 0);					
		}	
	});
});

 

スクロール値を取得する

windowオブジェクトのscrollというメソッドを使って取得します。
HTMLクイックリファレンス参照。

scrollはjsのメソッドで、scrollTopはjQueryのメソッドですかね。
cssのy方向のスクロール量dyを使って表示を操作します。

 

背景画像を固定する

(1) 1つ目の背景画像を固定する
取得したdyの値が画像のheight(852px)以下の間は、同じ画像を表示させるようにします。
background-position-yプロパティ(背景画像の縦方向の表示開始位置を指定するプロパティ)を使って、スクロールした分だけ開始位置をdyに合わせればおkです。

 
(2) 2つ目以降の背景画像を固定する
指定方法は(1)と同じだけど、開始位置を0になるようにしなければいけないのでスクロール数から、画像1のheight分(852px)の数値を引いた値をbackground-position-yに指定します。

 

いくつかWebを参考にさせてもらったけど、dotinstallがとてもわかりやすかったです。

 
以前見かけたこちらのサイトくらいアレンジできると素敵ですね。
EVERY LAST DROP

 
いじょ