アニメーションブロックのアニメーションのバリエーションが増えました!

Lightning Pro および Katawara に付属する VK Blocks Pro に入っているアニメーションブロックに「左右」「上下」「ぶるぶる(Y方向)」「ぶるぶる(X方向)」「どきどき」「ゆらゆら」を追加しました。VK Blocks Pro 0.41 〜 利用可能です。

それぞれ「アニメーションの速度」「アニメーションの距離」が設定できるので組み合わせで面白い表現が出来るのではないかなと思います。

laputa

フェードイン 早い

フェードイン 標準

フェードイン 遅い

スライドアップ 速い 短い

スライドアップ 標準 標準

スライドアップ 遅い 長い

スライドアップ 非常に遅い 長い

左右 速い 短い

左右 標準 標準

左右 遅い 長い

左右 非常に遅い 長い

上下 速い 短い

上下 標準 標準

上下 遅い 長い

上下 非常に遅い 長い

Trembring Y 短い

Trembring Y 標準

Trembring Y 長い

Trembring X 短い

Trembring X 標準

Trembring X 長い

どきどき 速い 短い

どきどき 標準 標準

どきどき 遅い 長い

どきどき 非常に遅い 長い

ゆらゆら 非常に速い 標準

ゆらゆら 速い 標準

ゆらゆら 標準 標準

ゆらゆら 遅い 標準

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 短い

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 長い

アニメーションブロックを入れ子にして複数の動きを設定してみたりもできるようです…(動作保証外)

laputa

ただ、残念ながら同じ領域内で複数のアイテムをアニメーションさせるのは難しいです。上記の例で言えば ラ○ュ○ と雲をそれぞれ違う動きにするのは難しいです。

雲をラ○ュ○の上や下のブロックとして配置すれば一応可能ではあります。
あるいは、重ねたい要素のブロックにHTMLアンカーなどをつけて、そのアンカーに対して CSS で position 指定して上または下にオフセットして重ねるという形ならできなくはないと思います。

VK Blocks Pro のユーザーの方はぜひお試しください。

Lightningならビジネスサイトもブログも簡単に作れます

有効インストール数6万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。