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

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

Webページは基本的に静的で、動くものは訪問者の目を引きます。アニメーションGIF、Flash、動画などがありますが今回はユーザの操作によるインタラクティブなアニメーションを実現するmagicを紹介します。


色々なパターンのアニメーションが用意されています。


それぞれのボタンを押すとアニメーションが実行されます。


デモ動画です。たくさんのパターンがあるのでぜひ試してみて下さい。

magicではボタンやパネルをクリックすると裏にあるオブジェクトを表示すると言ったようなエフェクトが実現できます。magicはスタイルシートのみでアニメーションを実現しています(実行のトリガーはJavaScriptですが、クラスを追加するだけです)。技術的にも興味深いソフトウェアです。


MOONGIFTはこう見る

同様のエフェクトを使っている例としてブログのシェアボタンを隠しておいてクリックするとパネルが開いて押せるようにするといったものがあります。ソーシャルボタンのデザインは画一的でサイトの雰囲気と合わないと言った時に使うと良さそうです。

他にもクリックすると実際の価格が分かると言ったものや、一部の文字を隠したクイズでも使えるかもしれません。ちょっと情報を隠しておきたいといった時に良いでしょう。覚えておくと役立つ場面がありそうです。

magic css3 animations

miniMAC/magic

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2