Blocks Animationでギャラリーに個性的なアニメーションをつける

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

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

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

ROTATE

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

項目	設定値
アニメーション	入れ替わり / 中央、上下左右支点をランダムに
遅延	200ミリ秒
速度	デフォルト

SLIDE

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

項目	設定値
アニメーション	スライド / 左、右からスライドを交互に
遅延	なし
速度	デフォルト

ROLLING

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

項目	設定値
アニメーション	ロールイン
遅延	500ミリ秒
速度	デフォルト

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