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


  1. 製品更新情報
  2. VK Blocks Pro
  3. アニメーションブロックのアニメーションのバリエーションが増えました!

この記事は2年以上前に公開されたものです。最新の情報を参考にしてください。

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 のユーザーの方はぜひお試しください。

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP