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

AnimateScrollはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webページは縦長になりがちです。そこで使われるのが自動スクロールですが、一気に飛んでしまうとユーザのストレスになるのでスムーズなスクロールが求められます。そこで今回はAnimateScrollを紹介します。


AnimateScrollでは3つのパターンのスクロール法が利用できます。詳細は動画をご覧ください。


実際にはもっと滑らかなのでぜひ実際に試してみてください。

よくあるのは素早く移動して目的の場所近くになると減速して止まるというものかと思います。AnimateScrollではさらに一旦行き過ぎてからバウンドするなど細かくカスタマイズされた動きを実現しています。面白いスクロールです。


MOONGIFTはこう見る

画面が切り替わったり、目にしている情報が一気に変化するとユーザの集中力は途切れてしまいます。WebサイトではURLごとにレンダリングし直すので他の場面に比べると慣れていると言えますが、それでも急激な変化はよくありません。

アプリでは上下左右からスライドしてきたり、ズームしながら表示されると言ったようにUIを徐々に変化させることでユーザのストレスを下げています。Webサイトでも同じような考え方は導入すべきでしょう。

AnimateScroll - jQuery Plugin for Animating Scroll

ramswaroop/animatescroll.js

 

MOONGIFTの関連記事

  • DevRel
  • Com2