skrollr
簡単にパララックスを実現するプラグインとして魅力的なskrollrをご紹介します。
jQueryを使わず単体で動くので、軽量で済ませたいスマホサイト構築の時などに良いかもしれません。
用意するもの
まずはGitHubからskrollr.jsをダウンロードします。また、IEでも動くようにするためにこちらからskrollr.ie.jsを手に入れて追加しておくと良いでしょう。
<script type="text/javascript" src="skrollr.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="skrollr.ie.min.js"></script> <![endif]-->
書き方
JavaScript部分で最低限必要な記述は下記の1行だけです。skrollrを実行して、あとはhtmlのプロパティに記述していくことでパララックス効果を設定していきます。
var s = skrollr.init();
skrollr独自のプロパティにスタイルシートの記述を設定していくことで効果をつけることができます。
「data-x」の“x”部分にはスクロール値を入れます。ページトップなら「data-0」、トップから1000pxスクロールした位置なら「data-1000」と、動かしたい要素ごとに細かい設定を与えられます。
そして「data-x」には、スタイルシートでそのスクロール値のときには要素どんな状態にしたいかを設定します。
例えば下記の記述なら、data-0（ページトップ）の時には背景色は黒、data-endの時には背景色は灰色という効果になります。ちなみにdata-endは文字通り終わりまでスクロールしたときの状態を設定する書き方です。
他にも色々な書き方がありますが、ごちゃごちゃするのでここでは紹介しません。詳しくは公式で確認してみてください。
<div id="obj01" data-0="background-color:rgb(0,0,0);" data-end="background-color:rgb(140,140,140);">obj01</div>
また、CSS3のtransformなども設定することが出来ます。下記の例は要素を回転させる記述です。また下記で「transform[swing]」とCSSでは見ない記述をしていますがこの括弧内の記述はイージング指定です。等速だけでなく簡単にイージングもかけられるなんて便利！効果はlinear、quadratic、cubic、begin/end、swing、sqrt、bounceの7種類から選べます。
<div id="obj02" data-0="transform[swing]:rotate(0deg);" data-end="transform[swing]:rotate(360deg);">obj02</div>
ここまで、スクロール値によって変化するアニメーションの書き方を紹介してきましたが、いわゆる背景画像のスクロールスピードを変えて視差効果を持たせたい場合は、background-positionの設定を調整してあげれば良いと思います。
最後に、全部まとめたコードは以下になります。
※実際にテストする場合はこれにちょっとCSSを足さないと見づらいかも
<body> <div id="wrap"> <!--スクロールすると背景色が変わる。--> <div id="obj01" data-0="background-color:rgb(0,0,0);" data-end="background-color:rgb(140,140,140);">obj01</div> <!--スクロールすると要素が回転する。動きにイージングがかかっている--> <div id="obj02" data-0="transform[swing]:rotate(0deg);" data-end="transform[swing]:rotate(360deg);">obj02</div> </div> <!--必要なファイルを読み込み--> <script type="text/javascript" src="skrollr.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="skrollr.ie.min.js"></script> <![endif]--> <script type="text/javascript"> //scrollrを実行 var s = skrollr.init(); </script> </body>
