インパクト大！スクロールによるパララックスを実現「Stellar.js」
Stellar.jsは縦横両方のスクロールに対応したパララックスを実現するライブラリです。
最近見かけるようになったパララックス（視差効果）を使ったWebサイト。スクロールによって要素ごとに速度が異なることで面白いイフェクトを生み出します。今回はそんなパララックス効果を演出するライブラリであるStellar.jsを紹介します。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-23 11.46.12.1366721730.png)
こちらは公式サイトより。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-23 11.46.28.1366721735.png)
横にスライドします。星の流れはそれぞればらつきがある所が面白いです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-23 11.46.58.1366721740.png)
こちらは縦に変化するパターン。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-23 11.47.04.1366721759.png)
春夏秋冬が表現されています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-23 11.47.09.1366721770.png)
画像の切り替わりが格好いいです。
Stellar.jsは縦スクロールはもちろん、横スクロールによるパララックス効果にも対応しています。単純にスライドしていくだけでは分からないスピード感あるイフェクトが提供できるはずです。
Stellar.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Webサイトというのは縦長になりがちです。それを単にスクロールしているだけでは面白くありませんが、パララックスのような効果を施すことで一気にインパクトが出ます。こういった効果をCSSやJavaScriptで実装しているのが面白さです。
他にもクリックや文字列の選択など、Webブラウザ上でユーザが実行するイベントは多数あります。それをキャッチして効果的なイフェクト（例えばアンカーでの移動をスムーズに行うのもそうです）を実行するとユーザのウケが良いのではないでしょうか。