jQuery scroll parallax pluginを使ってみた

最近もちらほら見るパララックス効果を実装できるjQuery scroll parallax pluginを触ってみました。

下記サイトのDownload the plugin from githubからプラグイン一式をダウンロード
jQuery scroll parallax plugin

基本、サンプルを踏襲しつつ進めていきます。

→DEMO1

【html header内】
以下3つのjsを読み込みます。

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/jquery.scrollParallax.min.js"></script>

<script type="text/javascript">
$(function(){
	$('.s_02').scrollParallax({'speed': -0.2});
	：
	$('.s02').scrollParallax({'speed': 0.2});
	：
});
</script>

サンプルでは各要素に個別にスピードの設定をしてありましたが、
ここではスピード用のクラスごとにscrollParallaxのスピードを設定して使用しています。

【html body内】

<ul class="items">
	<li class="item item1 s_02">
		<div class="inner inner1_1 s_06"></div>
		<div class="inner inner1_2 s_14"></div>
		<div class="inner inner1_3 s_20"></div>
		<div class="content">テキストコンテンツエリア1<br>ダミー画像</div>
	</li>
	<li class="item item2 s_02">
		<div class="inner inner2_1 s02"></div>
		<div class="inner inner2_2 s04"></div>
		<div class="inner inner2_3 s06"></div>
		<div class="content">テキストコンテンツエリア2<br>雲</div>
	</li>
	<li class="item item3 s_02">
		<div class="inner inner3_1 s_04"></div>
		<div class="inner inner3_2 s_02"></div>
		<div class="inner inner3_3 s_08"></div>
		<div class="content">テキストコンテンツエリア3<br>泡</div>
	</li>
</ul>

【css内】

.item1{background: black url(http://dummyimage.com/1024x768/1576bd/2a88ce.jpg&text=背景画像) 0px 0px fixed no-repeat;}
.inner1_1{background: url(http://dummyimage.com/200x200/bbb/ccc.jpg&text=innerimage1) 400px 200px fixed no-repeat;}
:

( li .item ) 1ブロックごと
( li .item+数字 ) cssで背景画像を指定
( li .inner ) 各小さいアイテム
( li .inner+数字 ) 各小さいアイテムにcssで背景画像と基本表示位置を指定

→DEMO1

【応用】以下はページ内リンクとスクロールのイージング追加版です

<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easie.js"></script>

<script type="text/javascript">
    $(function(){
	/* page's scroll */
	$('a[href^=#]').click(function() {
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
    
    /* mousewheel easing */
	var scrolly = 0;
	var speed = 100;
	$('html').mousewheel(function(event, mov) {
		if(jQuery.browser.webkit){
			if (mov > 0) scrolly =  $('body').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('body').scrollTop() + speed;
		} else {
			if (mov > 0) scrolly =  $('html').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('html').scrollTop() + speed;
		}
		$('html,body')
			.stop()
			.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
			//イージングプラグイン使わない場合
			//.animate({ scrollTop: scrolly }, 'normal');
		return false;
	});
</script>

http://dummyimage.com/1024x768/333333/cccccc.jpg&text=ダミー画像