スクロールによって格好よく変化するWebページを作る際に「jQuery Parallax」
jQuery ParallaxはNikeのCSR活動報告ページを真似た、スクロールアニメーションを実現するライブラリです。
NikeによるCSR活動をアピールする場として公開されているNike Better World。そんなNike Better Worldのような画面構成を実現しているjQueryプラグインがjQuery Parallaxです。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 15.00.20.1360145361.png)
トップページです。下にスクロールしていきます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 15.00.25.1360145369.png)
こんな感じで上書きされるようにスクロールします。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 15.00.37.1360145377.png)
さらに別な表示に。ダイナミックで格好いいです。
Nike Better Worldのサイトは既にアップデートされているようでjQuery Parallaxに示されるようなデザインではないのですが、スクロールによってコンテンツがダイナミックに変化していくのはとても格好よく、スタイリッシュです。
jQuery ParallaxはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
最近、このようなスクロールで動きが変わるWebサイトが増えています。デザインはもちろんのことながら、そのスクロールによってコンテンツを変化させるというアニメーション的な視点も予め含んで作らなければならいのは高いテクニックが必要と言えるでしょう。
ランディングページなど、インパクトある1ページを作る際に必要な技術と言えそうです。いかにして素早く、低コストで実装できるかを常に考える必要があると言えるでしょう。