読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

パララックス効果を実現したページをscrolldeckで実現

こんにちは iijmyaです。

今回はscrolldeckを利用して、パララックス効果を実現してみましょう。


1.パララックス効果とは

パララックス(parallax)とは、直訳すると「視差」という意味です。
Web上で言われるパララックス効果とは、ページをスクロールする際に、画像や文字などが異なるスピードやタイミングで動作することを指します。


2.パララックス効果を実現する

言葉だけではなかなか想像し辛いと思いますので、実際にパララックス効果を実現したページを作ってみましょう。

scrolldeckのダウンロード

scrolldeck*1こちらからダウンロードすることができます。


scrolldeckのjsファイルを読み込む

scrolldeckを用いるには、以下のファイルを読み込みます。

<script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" 
 charset="utf-8"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/jquery.scrolldeck.js"></script>

ナビゲーションの初期化
$(document).ready(function() {
 var deck = new $.scrolldeck({
  slides: '.slide'
 });
});

この他にも「buttons」や「duration」などのオプションを指定することが出来ます。


対象モジュールにマークアップ

あとは、複数モジュールの親モジュールのclass属性の値に「slide」を指定して構成を作り、各モジュールに対して、「class=”animate-in”」や「data-animation」属性などの属性や属性値を付けてあげるだけです。

<div class="slide" id="para">
 <p  class="title animate-in" data-animation="fade-in">Parallax.</p>
 <p class="main animate-in" data-animation="fly-in-left">〜略〜</p>
 <div class="img animate-in" data-animation="fly-in-right">
  <img src="./img/sample.jpg" />
 </div>
</div>

data-animation属性の値によってパララックス効果が異なります。
 <例>

  • "fly-in-left"…対象モジュールが左側から現れる
  • "space-in"…対象モジュールが拡大された状態から現れる
  • "fade-in"…対象モジュールがフェードインする


イメージ画

f:id:seattleservice:20130517184526p:plain

スクロールしていくと・・・

f:id:seattleservice:20130517184535p:plain



以上です。
使い込めばかっこいいページを作ることが出来そうですね。

*1:scrolldeck…jQueryのプラグインのひとつ