jQuery scroll parallax pluginを使ってみた
最近もちらほら見るパララックス効果を実装できるjQuery scroll parallax pluginを触ってみました。
下記サイトのDownload the plugin from githubからプラグイン一式をダウンロード
jQuery scroll parallax plugin
基本、サンプルを踏襲しつつ進めていきます。
【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で背景画像と基本表示位置を指定
【応用】以下はページ内リンクとスクロールのイージング追加版です
下記サイト様のサンプル等を参考にさせて頂きました。
ページ内リンクをするするーっとスムースにスクロールする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>
このプラグインは基本cssで背景に画像を設定して動かすので、要素内に入れた画像等は動かないみたい。
背景と、各シーンのコンテンツという割とシンプルな構成に使うぽい。
ちなみに、背景画像等で使っていたのはURLだけでダミー画像を作ってくれるサービスです。
Dynamic Dummy Image Generator
http://dummyimage.com/1024x768/333333/cccccc.jpg&text=ダミー画像
http://dummyimage.com/横サイズx縦サイズ/背景色/文字色.拡張子&text=テキスト
コメント
わかりやすい解説ありがとうございます!
とても、スムーズに導入することができました!感謝です!
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