さぁ!検索しよう!

パララックス効果の基本的な仕組みを紹介します。

eye-catch-24_mini

パララックス効果とは、ブラウザ上で要素を立体的に見せる効果をいいます。簡単なデモを作成しましたので始めにご覧ください。

動作デモ1

動作デモ

続いて表現方法を説明します。

3つの言語で下記のようにして表現します。

HTML

<body>
	<div class="ele1"><img src="image/ele1.png"></div>
	<div class="ele2"><img src="image/ele2.png"></div>
	<div class="ele3"><img src="image/ele3.png"></div>
	<div class="ele4"><img src="image/ele4.png"></div>
	<div class="ele5"><img src="image/ele5.png"></div>
	<div class="ele6"><img src="image/ele6.png"></div>
</body>

文字や画像などの要素を定義します。

CSS

html,body {
	background:#dfdfdf;
	height:10000px;
}

.ele1,
.ele2,
.ele3,
.ele4,
.ele5,
.ele6 {
	height:300px;
	position:fixed;
	right:0;
	width:300px;
}

.ele1 {
	bottom:0;
	z-index:6;
}

.ele2 {
	bottom:100px;
	z-index:5;
}

.ele3 {
	bottom:200px;
	z-index:4;
}

.ele4 {
	bottom:300px;
	z-index:3;
}

.ele5 {
	bottom:400px;
	z-index:2;
}

.ele6 {
	bottom:500px;
	z-index:1;
}

要素の重なり順を決め、それぞれ固定配置します。

jQuery

$(function(){
		var ele1 = $('.ele1').offset().left;
		var ele2 = $('.ele2').offset().left;
		var ele3 = $('.ele3').offset().left;
		var ele4 = $('.ele4').offset().left;
		var ele5 = $('.ele5').offset().left;
		var ele6 = $('.ele6').offset().left;

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

			$('.ele1').css(
				'left',ele1+(-value/3)
			);

			$('.ele2').css(
				'left',ele2+(-value/6)
			);

			$('.ele3').css(
				'left',ele3+(-value/9)
			);

			$('.ele4').css(
				'left',ele4+(-value/12)
			);

			$('.ele5').css(
				'left',ele5+(-value/15)
			);

			$('.ele6').css(
				'left',ele6+(-value/18)
			);
		});
	});

始めに、offset()で先ほどCSSで固定配置した各要素の座標値の取得と、scrollTop()で現在のスクロール量の取得を行ないます。
次に、offset()scrollTop()で取得した値を加算し、適当な数字で割ったものを速度として指定します。このとき、重なりが上に行くほど速度を上げるようにします。

上記の手法以外に、animate()関数で動作にアニメーションを加えたり、if文を利用してスクロール量で条件分岐を行ない動作のタイミングを制御することも可能です。

動作デモ2

動作デモ

$(function(){
        var ele1 = $('.ele1').offset().left;
        var ele2 = $('.ele2').offset().left;
        var ele3 = $('.ele3').offset().left;
        var ele4 = $('.ele4').offset().left;
        var ele5 = $('.ele5').offset().left;
        var ele6 = $('.ele6').offset().left;

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

            $('.ele1').css(
                'left',ele1+(-value/3)
            );

            $('.ele2').css(
                'left',ele2+(-value/4)
            );

            $('.ele3').css(
                'left',ele3+(-value/5)
            );

            $('.ele4').css(
                'left',ele4+(-value/6)
            );

            $('.ele5').css(
                'left',ele5+(-value/7)
            );

            $('.ele6').css(
                'left',ele6+(-value/8)
            );

            if(value>1000){
               $('.ele3').stop().animate({
                    'opacity':0
               },500,'linear');
            }else{
                $('.ele3').stop().animate({
                    'opacity':1
               },500,'linear');
            };
	});
});

以上です。