ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Stellar.jsは縦横両方のスクロールに対応したパララックスを実現するライブラリです。

最近見かけるようになったパララックス(視差効果)を使ったWebサイト。スクロールによって要素ごとに速度が異なることで面白いイフェクトを生み出します。今回はそんなパララックス効果を演出するライブラリであるStellar.jsを紹介します。


こちらは公式サイトより。


横にスライドします。星の流れはそれぞればらつきがある所が面白いです。


こちらは縦に変化するパターン。


春夏秋冬が表現されています。


画像の切り替わりが格好いいです。

Stellar.jsは縦スクロールはもちろん、横スクロールによるパララックス効果にも対応しています。単純にスライドしていくだけでは分からないスピード感あるイフェクトが提供できるはずです。

Stellar.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Webサイトというのは縦長になりがちです。それを単にスクロールしているだけでは面白くありませんが、パララックスのような効果を施すことで一気にインパクトが出ます。こういった効果をCSSやJavaScriptで実装しているのが面白さです。

他にもクリックや文字列の選択など、Webブラウザ上でユーザが実行するイベントは多数あります。それをキャッチして効果的なイフェクト(例えばアンカーでの移動をスムーズに行うのもそうです)を実行するとユーザのウケが良いのではないでしょうか。

Stellar.js

markdalgleish/stellar.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2