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

画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。

今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行ってくれます。

midoriの使い方

サンプルです。画像が切り替わる際にグリッチが行われているのが分かります。

こちらは標準のアニメーション。エフェクトは自分で選択できます。

midoriは主に画像を背景として適用した場合を想定しています。そして画像が切り替わる際にアニメーションしたり、画像に対するエフェクトが指定できます。スタイリッシュな切り替えを指定することで、見た目のインパクトが大きく変わることでしょう。

midoriはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

midori

aeroheim/midori: library for animated image backgrounds

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2