去年からオサレ()なサイトやアプリで使われ始めたパララックス。トップページに入れてみました。スマホだとうまく動かないけどPCのブラウザだとそれっぽくなります。

パララックスを簡単に実現できますなものはたくさんあるらしいですが、とりあえず jqueryプラグインを選んでみました。
https://github.com/IanLunn/jQuery-Parallax

使い方は、並べたい画面を div タグで記述。

[code lang="ruby"]
#first
.story
.float-right
.social.col-md-12
.twitter
%a.twitter-share-button{"data-lang" => "ja", "data-text" => "マンガ発売日情報サイト「Shelfy」をシェアしました！", "data-hashtags" => "Shelfy", :href => "https://twitter.com/share"} ツイート
.facebook
.fb-like{"data-href" => "http://shelfy.me#{request.fullpath}", "data-layout" => "button_count", "data-send" => "false", "data-show-faces" => "false"}
.float-left
%h2 説明文
#second
.story
.float-right
%h2 説明文
#third
.story
.float-right
%h2 説明文
[/code]

div タグのレイアウト（サイズ）を css に記述。

[code lang="ruby"]

#first{
background:url(para1.jpg) 50% 0 no-repeat fixed;
background-size: cover;
color: white;
height: 1200px;
margin: 0 auto;
padding: 0;
.story .float-left, .story .float-right{
padding: 50px 0 0 0;
position: relative;
width: 500px;
}
}

[/code]

js 側に↓みたいなコードを用意。

[code lang="ruby"]
$(document).ready(function(){
$('#nav').localScroll(800);
$('#first').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('#third').parallax("50%", 0.3);
})

[/code]

でできあがり。

http://shelfy.me/ の（ログインしていない状態）トップページに組み込んでいます。

ただスマホや iPad で見た場合にうまくパララックス効果が出ていない・・orz
この辺は要調査かな。