jQueryによるパララックス・エフェクト「paranimator」
paranimatorはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。
スクロールを使ってアニメーションを実行するパララックス・エフェクトは使いどころによっては大きなインパクトを残せます。作るのが大変というイメージがありますが、paranimatorを使えば容易に実現できるようになりそうです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.53.16.1377563723.png)
最初の表示です。スクロールしていきます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.53.20.1377563726.png)
テキストはそのままに背景だけずれていきます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.53.33.1377563730.png)
次々に文字が浮かび上がってきます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.53.39.1377563733.png)
背景が移り変わります。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.56.24.1377563737.png)
スマートフォンにも対応しています。滑らせるとアニメーションが起きます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.56.32.1377563741.png)
文字が回転したりします。
paranimatorの特徴はページネーションの対応、キーフレームを指定したアニメーション実行、自動スクロール対応があります。ブラウザはIE8以降でサポートされていますので広く使える場面があるのではないでしょうか。
MOONGIFTはこう見る
閲覧している人に印象を与える一つの要素に普通と違う動きを見せるというのがあります。一見するとストレスになりがちですが、閲覧者が望んでいる動作(下にスクロール)は実現しつつ、その速度が異なるという小さな違いが印象を変えます。
今は一つ一つ手作業でチューニングされている感がありますが、ライブラリ化されればもっと自由に使えるようになります。ライブラリになればプログラマとしての力でよりダイナミックな表現やエフェクトに挑戦できるようになるでしょう。