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

Web訪問者の目を引く方法の一つにアニメーションがあります。静的に表示しただけでは無視されてしまうコンテンツも、アニメーションさせることで目に留まりやすくなります。これは随時データが追加される場合に特に有効です。

例えば新着のお知らせなどで使ってみたいのがsimple-vscrollerです。定期的に流れていくコンテンツは新しい発見があるのではないかと見ているだけで楽しくなります。

デモです。新しいコンテンツが上から下りてきます。
デモです。新しいコンテンツが上から下りてきます。

画像では分かりづらいので動画でご覧ください。

仕組みはさほど難しくはなくて、最初にアニメーションしながら上に空白を作り、そこに浮かぶあがるようなアニメーションでコンテンツを表示を繰り返します。ニュース表示などで必要とされやすい表示だけにアニメーションする部分を含めて知っておくと応用が効きそうです。

simple-vscrollerのベースはvScrollerになっていて、それをシンプルに使えるようにしたソフトウェアとのことです。

simple-vscrollerはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

dfang/simple-vscroller

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2