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

scrolloramaはスクロールで制御される文字列をアニメーション化するJavaScriptライブラリです。

Webページでインパクトある表現を求めている方にお勧めしたいのがscrolloramaです。


最初の表示です。ここから下にスクロールしていきます。


まず上にあった文字がばらけていきます。


下にある文字が回転しながら収まっていきます。


ダイナミックに展開していきます。


文字が下から迫ってきます。


大きな文字が下からスライドしてきます。


格好よく重なっていきます。


scrolloramaというメソッドでアニメーションを指定します。


実際の設定です。アニメーションも関数で指定できます。


デモ動画です。ダイナミックな動きをご覧ください。

scrolloramaはスクロールに合わせてアニメーションするので、勝手にはじまってスクロールした頃には終わっていたなんてことはなさそうです。

scrolloramaはJavaScript/jQuery製、MIT LicenseとGPLのデュアルライセンスのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

最近、CSSだけで表現するアニメーションというのが増えています。scrolloramaも近いですが、JavaScriptだけで実装しているのが特徴です。CSSだけで実現する方がインパクトはありますが、プログラマなどが手軽に使うという意味ではJavaScriptのが良いかも知れません。

従来のアニメーションであればFlashやアニメーションGIFでの実装くらいしかありませんでしたが、HTML5の登場以後JavaScriptやCSSを使ったアニメーション実装が広がってきています。表現力の向上を知る上でもチェックしておく必要があるでしょう。

デモ:scrollorama

johnpolacek/scrollorama - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2