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

midoriの使い方

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

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

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

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

midori aeroheim/midori: library for animated image backgrounds