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

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

スクロールを使ってアニメーションを実行するパララックス・エフェクトは使いどころによっては大きなインパクトを残せます。作るのが大変というイメージがありますが、paranimatorを使えば容易に実現できるようになりそうです。


最初の表示です。スクロールしていきます。


テキストはそのままに背景だけずれていきます。


次々に文字が浮かび上がってきます。


背景が移り変わります。


スマートフォンにも対応しています。滑らせるとアニメーションが起きます。


文字が回転したりします。

paranimatorの特徴はページネーションの対応、キーフレームを指定したアニメーション実行、自動スクロール対応があります。ブラウザはIE8以降でサポートされていますので広く使える場面があるのではないでしょうか。


MOONGIFTはこう見る

閲覧している人に印象を与える一つの要素に普通と違う動きを見せるというのがあります。一見するとストレスになりがちですが、閲覧者が望んでいる動作(下にスクロール)は実現しつつ、その速度が異なるという小さな違いが印象を変えます。

今は一つ一つ手作業でチューニングされている感がありますが、ライブラリ化されればもっと自由に使えるようになります。ライブラリになればプログラマとしての力でよりダイナミックな表現やエフェクトに挑戦できるようになるでしょう。

のりきる.com

YosukeZusa/paranimator

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2