jQuery scroll parallax pluginを使ってみた

2012年6月1日 金曜日

最近もちらほら見るパララックス効果を実装できる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

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

下記サイト様のサンプル等を参考にさせて頂きました。
ページ内リンクをするするーっとスムースにスクロールするJavascript
jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel

【html header内】
マウスホイール感知、イージング用のjsを追加

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

jQuery function内に下記を追加

<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>

→DEMO2

このプラグインは基本cssで背景に画像を設定して動かすので、要素内に入れた画像等は動かないみたい。
背景と、各シーンのコンテンツという割とシンプルな構成に使うぽい。

ちなみに、背景画像等で使っていたのはURLだけでダミー画像を作ってくれるサービスです。
Dynamic Dummy Image Generator


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

http://dummyimage.com/横サイズx縦サイズ/背景色/文字色.拡張子&text=テキスト

(Visited 2,007 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメント

  • わかりやすい解説ありがとうございます!
    とても、スムーズに導入することができました!感謝です!

    2012年7月25日[水] 11:03 AM  |  7

 コメントフィード

トラックバック

  • […] scroll parallax plugin パララックス効果 参考サイト→ その1 カテゴリー: Ajax・JS   作成者: tama […]

    2013年1月18日[金] 12:22 PM  |  Ajaxいろいろ | memo

 トラックバックURL
http://lettuce-eater.com/blog/archives/118/trackback