以前、写真をフワッと浮き上がるようなCSSアニメーションを作成できるとして、Blocks Animationというプラグインを紹介しました。

 出典 : Blocks Animation

Blocks Animationでは他にも多くのアニメーションを実装できます。今回はギャラリーなどで使用できるアニメーションの設定を、オススメの画像形状とともに紹介します。

GALLERY ANIMATION

ANIMATION

今回のDEMOの1つ目は、正方形画像の回転アニメーション、2つ目は、縦長画像のスライドアニメーション、3つ目は、円形画像がコロコロ転がるアニメーションです。

ROTATE

正方形の画像がフェードイン回転しながらグリッド状に並びます。回転の軸を中心、上下左右と変化させることで、ランダムで、動きのあるアニメーションを作成することができます。

SLIDE

フェードインアニメーションのスライドは、ブラウザ外からスタートするアニメーションでした。スライドアニメーションは、動きが少ない分、落ち着いたイメージになります。

ROLLING

画像が左からふフェードインして、コロコロ回転移動しならが表示されるアニメーションです。転がるような、かわいい動きなので円形画像がオススメです。サムネイルなど、いろいろ用途がありそうですね。

以上で今回の説明は終了です。まだまだBlocks Animationでは、まだまだアニメーションがありますが、今回はギャラリーなどで使用できそうな動きに絞って紹介しました。プラグインのみで簡単に実装できるので、便利ですね。