JavaScript/CSSを使ってスクロールによるアニメーションを実現「skrollr」
skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。
最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。
デモです。スクロールを開始します！
回転しながら飛んでくる文字！
下から上がってくる文字！
横からスライドも。
色が変わりました。それに合わせてテキスト色も変わっています。
上下からボックスが迫ってきます。
終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。
実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。
skrollrはJavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
従来Webブラウザ上でアニメーションを実行しようと思ったらFlashまたはアニメーションGIFを使うのが一般的でした。しかしそのためにFlashやActionScriptを覚えようと考える人は多くなかったと思われます。JavaScriptによってアニメーションを実装するまでの障壁が一気に低くなったと言えそうです。
さらにFlashでアニメーションというとバナーレベルの再読み込みするたびに繰り返し表示される類のものが多く、最初こそインパクトがあるもののすぐにSkipボタンを押されてしまっていました。JavaScriptによってユーザの操作を取得できれば、よりインタラクティブでユーザに楽しんでもらえる作品が作れるはずです。