こんにちは、福田です。
今年はパララックス効果（サイトをスクロールすると要素が出現したり、背景がずれるように動いたりするあれです）を使ったPCサイトが流行りました。スマホの方はまだまだ珍しい部類です。
今回はjQueryプラグイン「Stellar.js」を使い、複数テキストの縦スクロール速度をずらすことでパララックス効果を表現します。
デモはこちら
動作確認済：iOS6 safari、Chrome
※PC（Chrome）の場合、マウスでドラッグすると同等の動きが確認できます。
導入
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="js/jquery.stellar.js"></script> <script src="js/scrollability.min.js"></script>
jQuery本体とjquery.stellar.js、iOSで動作させる場合はscrollability.jsも必要です。
$(function(){
$('#page').stellar({
scrollProperty: 'transform'
});
});
パララックス効果を適用する親ブロックにStellar.jsを設定します。
iOSで動作させる場合はオプションでscrollProperty: ‘transform’を指定する必要があります。
<div data-stellar-ratio="2">早いスクロール</div>
Stellarが設定されたブロック内の要素にdata-stellar-ratioプロパティを設定すると、スクロールした際の速度が変化します。1が通常で、数値が高いほど早くなります。
その他プロパティなど詳しいドキュメントはこちら
所見
パララックス効果は、PCであれば背景画像を動かしてダイナミックに見せることができますが、スマホで同じことをすると極端に重たくなります。実用レベルでは、アクセントとしてちょこっと使うか、動きを組み合わせるなど工夫する必要がありそうです。
最後に、そんな工夫がされたスマホサイトを二つご紹介します。（これらはStellar.jsではなく、独自開発と思われます。）
Air Jordan 2012
http://www.nike.com/jumpman23/aj2012/mobile/
最初にテキストがバラけるシーンで、同じ速度で動くものは1枚画像にまとめることで要素の数減らし、軽量化を図っています。全部で16文字ありますが、実際は4枚程度の画像で表現しています。
東京タワーズ
http://www.takumitaniguchi.com/tokyotowers/
横移動の際、背景画像のスライドが少し重たいですが、アニメーション自体が一瞬なのであまり気になりません。
