パララックス効果を実現したページをscrolldeckで実現 - シアトルコンサルティングサービス開発ブログ

こんにちは iijmyaです。

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

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

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

２．パララックス効果を実現する

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

■ scrolldeckのダウンロード

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

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

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

jquery.easing.1.3.js
jquery.min.js
jquery.scrolldeck.js
jquery.scrollorama.js
jquery.scrollTo-1.4.2-min.js

<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属性の値によってパララックス効果が異なります。
　＜例＞