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

Javascript

最近パララックス(視差効果)を取り入れたサイトが増えてきました。

仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。

ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。

あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。

スクロール量を取得する

まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。

$(function(){
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#num").text("スクロール量:" + y);//表示用
	});
});

スクロールすると右上隅の数字が変わると思います。この取得した値を使って要素を動かします。

positionで動かす

まずはpositionで配置した要素を動かしてみます。

$(function(){
	var liPos = ($("li").offset());//最初の位置
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#icon01").css("top",liPos.top + y / 2);
		$("#icon02").css("top",liPos.top + y / 4);
		$("#icon03").css("top",liPos.top + y / 6);
		$("#icon04").css("top",liPos.top + y / 8);
	});
});

topの値を取得した値で変えていきます。一番左が早くて右の方が遅いです。取得した値を割る数字によって速さが変わります。

横にも動かす

この要領でleftの値も変えると右にも動くようになります。

$(function(){
	var li01Pos = ($("#icon01").offset());//最初の位置
	var li02Pos = ($("#icon02").offset());
	var li03Pos = ($("#icon03").offset());
	var li04Pos = ($("#icon04").offset());
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#icon01").css("top",li01Pos.top + y / 5);
		$("#icon02").css("top",li02Pos.top + y / 5).css("left",li02Pos.left + y / 13);
		$("#icon03").css("top",li03Pos.top + y / 5).css("left",li03Pos.left + y / 5);
		$("#icon04").css("left",li04Pos.left + y / 5);
	});
});

背景画像を動かす

次にbackground-positionで動かしてみます。

$(function(){
	var bg01 = $("section").css("height").replace("px","");
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("section").css('background-position','10px ' + parseInt( bg01 - y * 1.5) + 'px');
		$("#wrap01").css('background-position','100px ' + parseInt( bg01 - y * 2) + 'px');
		$("#wrap02").css('background-position','190px ' + parseInt( bg01 - y * 2.5) + 'px');
		$("#wrap03").css('background-position','280px ' + parseInt( bg01 - y * 3) + 'px');
	});
});

スクロールすると下からスターが動いてきます。

次はコンテンツの後ろにひくような画像です。

$(function(){
	var box2Pos = $('#box2').offset();
	var box3Pos = $('#box3').offset();
	var box4Pos = $('#box4').offset();
	var box5Pos = $('#box5').offset();
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#box1").css('background-position','left ' + y +'px');
		
		if(y > box2Pos.top){
			$("#box2").css('background-position','left ' + (y-box2Pos.top) +'px');
		}else{
			$("#box2").css('background-position','left top');
		}
		
		if(y > box3Pos.top){
			$("#box3").css('background-position','left ' + (y-box3Pos.top)*2 +'px');
		}else{
			$("#box3").css('background-position','left top');
		}
		
		if(y > box5Pos.top){
			var hoge2 = (y-box5Pos.top)
			var hoge3 = ((-200)+ hoge2);
			$("#box4").css('background-position','left ' +  hoge3  +'px');
			console.log(hoge3)
		}else{
			$("#box4").css('background-position','left -200px');
		}
		
	});
});

犬の画像とネコの画像はウインドウの一番上まで来ると固定されるような感じになり、プレーリードッグはスクロオールで上まで来ると下に動かしてます。きりんはグレーのエリアがスクロールで上まできたら、途中から固定になってます。

大きさや角度を変えてみる

また、CSS3のtransitionを合わせて使うと他にもさまざまな動きがつけられます。

大きさを変えたり回転させたりさせています。これらも合わせて使えば面白い演出ができそうですね。

$(function(){
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		
		var hoge1 = y * 0.001 + 0.5;
		if(hoge1 > 0.5){
			$("#box1").css('-moz-transform','scale(' + hoge1 + ')');
		}
		
		var hoge2 = y * 0.0009 + 0.1;
		if(hoge1 > 0.1){
			$("#box2").css('-moz-transform','scale(' + hoge2 + ')');
		}
		
		var hoge3 = y * (-0.001) + 2;
		if(hoge3 < 2){
			$("#box3").css('-moz-transform','scale(' + hoge3 + ')');
		}
		
		var hoge5 = y * 0.0009 + 0.5;
		$("#box5").css('-moz-transform','rotate(' + y + 'deg) scale(' + hoge5 + ')');
	});
});