3. javascript：jQueryでスクロールするパララックスサイトのサンプル

javascript：jQueryでスクロールするパララックスサイトのサンプル

javascript：jQueryでスクロールするパララックスサイトのサンプル
2012年のトレンドのひとつになるであろうパララックス効果を使ったサイト。 そんなパララックスサイトを今度の案件で実装する予定なので、サンプルサイトを制作してみました。 パララックス効果の概要については参考にしたサイトにお任せします:) 今回の方法としては、背景画像を指定し、background positionを変更し、個別にその速度を調節するやり方。 javascriptのソースはFranck Maurinさんのところを参考にさせてもらったのですが、 xポジションの指定が0固定だったので、そこを変更しました。 ※id指定のみの対応 以下、サンプルの主要な部分のピックアップ。

HTML

<nav>
<ul>
	<li><a href="#sec1">ページ1</a></li>
	<li><a href="#sec2">ページ2</a></li>
	<li><a href="#sec3">ページ3</a></li>
</ul>
</nav>
<section id="sec1" class="section">
  <article>
    <header>
    	<h1>title</h1>
      <p>text</p>
    </header>
    <div class="picArea">
      <p id="sec1pic1"></p>
      <p id="sec1pic2"></p>
      <p id="sec1pic3"></p>
    </div>
  </article>
</section>

CSS

/*sec1*/
#sec1{
	margin:0;
	width:100%;
	height:1000px;
	overflow: hidden;
	background:url(../img/bg1.jpg) 50% 0 no-repeat fixed;
}
#sec1 header{
	position:absolute;
	top:80px;
	width:400px;
}
#sec1 article .picArea p{
	position:absolute;
}
#sec1 #sec1pic1{
	width:100%;
	height:1000px;
	background:url(../img/sec1_img1.png) 76% 60px no-repeat;
}
#sec1 #sec1pic2{
	width:100%;
	height:1000px;
	background:url(../img/sec1_img2.png) 30% 520px no-repeat;
}
#sec1 #sec1pic3{
	width:100%;
	height:1000px;
	background:url(../img/sec1_img3.png) 96% 460px no-repeat;
}

Javascript

coeffは移動速度。マイナス表記ならスクロールする毎に上に。プラスなら下に。0が通常のスクロールのスピード。

導入部分

$(function () {
		$('#sec1').parallax({ "coeff":-0.15 });
		$('#sec1pic1').parallax({ "coeff":-0.120 });
		$('#sec1pic2').parallax({ "coeff":-0.40});
		$('#sec1pic3').parallax({ "coeff":-1});
});

コア部分

//parallax
(function($){
	
    $.fn.parallax = function(options){
        var ownerPos = $(this).backgroundPosition();
        var $$ = $(this);
        var offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var opts = $.extend(defaults, options);
        return this.each(function(){
            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = Number(ownerPos.y) + (windowTop * opts.coeff);
                    $$.css({
                        "background-position": ownerPos.x+ownerPos.xunit+" "+ 
newCoord + ownerPos.yunit
                    });
                }
            });
        });
    };
		
		
  //スタイルシートで設定している背景ポジションを取得
  $.fn.backgroundPosition = function() {
    var pos = $(this).css('backgroundPosition');
    //IE8以下だった場合
    if(typeof(pos) === 'undefined') {
        //id指定したエレメントの背景ポジションxとyを取得
        pos = document.getElementById(this.attr("id"))
.currentStyle["backgroundPositionX"] + ' ' + 
document.getElementById(this.attr("id"))
.currentStyle["backgroundPositionY"];
	}
	var bgPos = pos.split(' ');
	var rep = new Array();
	rep[0]=bgPos[0].match(/px|%/);//xの値がpxか％だった場合削除する
	rep[1]=bgPos[1].match(/px|%/);//yの値がpxか％だった場合削除する
	var posX = bgPos[0].replace(rep[0], '');
	var posY = bgPos[1].replace(rep[1], '');
	var bgpos = {x:posX,y:posY,xunit:rep[0],yunit:rep[1]};
	return bgpos;		
  };

})(jQuery);

サンプル

サンプルをみる 実制作時には以下も検討。
他に設定したい項目
  • 画像のプリロード・ローディング処理
  • ナビゲーションの設定
  • URL設定（hashchange）
  • キーボードイベントと連動
  • レガシーブラウザ対応
  • 横スクロール対応など

参照サイト・参考資料

Related Posts