Blocks Animationでギャラリーに個性的なアニメーションをつける
以前、写真をフワッと浮き上がるようなCSSアニメーションを作成できるとして、Blocks Animationというプラグインを紹介しました。
出典 : Blocks Animation
Blocks Animationでは他にも多くのアニメーションを実装できます。今回はギャラリーなどで使用できるアニメーションの設定を、オススメの画像形状とともに紹介します。
今回のDEMOの1つ目は、正方形画像の回転アニメーション、2つ目は、縦長画像のスライドアニメーション、3つ目は、円形画像がコロコロ転がるアニメーションです。
ROTATE
正方形の画像がフェードイン回転しながらグリッド状に並びます。回転の軸を中心、上下左右と変化させることで、ランダムで、動きのあるアニメーションを作成することができます。
項目 | 設定値 |
---|---|
アニメーション | 入れ替わり / 中央、上下左右支点をランダムに |
遅延 | 200ミリ秒 |
速度 | デフォルト |
SLIDE
フェードインアニメーションのスライドは、ブラウザ外からスタートするアニメーションでした。スライドアニメーションは、動きが少ない分、落ち着いたイメージになります。
項目 | 設定値 |
---|---|
アニメーション | スライド / 左、右からスライドを交互に |
遅延 | なし |
速度 | デフォルト |
ROLLING
画像が左からふフェードインして、コロコロ回転移動しならが表示されるアニメーションです。転がるような、かわいい動きなので円形画像がオススメです。サムネイルなど、いろいろ用途がありそうですね。
項目 | 設定値 |
---|---|
アニメーション | ロールイン |
遅延 | 500ミリ秒 |
速度 | デフォルト |
以上で今回の説明は終了です。まだまだBlocks Animationでは、まだまだアニメーションがありますが、今回はギャラリーなどで使用できそうな動きに絞って紹介しました。プラグインのみで簡単に実装できるので、便利ですね。