アニメーションの追加

WEBデザインを楽しくするために欠かせないのがアニメーションですよね。まず実装したかったのが、上に戻るアニメーションです。cocoonでは実装されていますが、Twenty Twenty-Three には入っていません。これは、プラグインで探すしかないと思い、検索したら見つかりました。

WPFront Scroll Top

このプラグインを入れるだけで、上へ戻るボタンが表示されました。しかもボタンの種類も豊富!

自分でデザインしたボタンも使えるようです。こんな簡単に実装できるなんて。

次に探したのが、画像などをスライドインさせたりできるプラグインです。そしたらこれもありました。

Animations for Blocks

有効インストール数 2,000+ とかなり少ないのですが、入れてみたらバッチリ動くので、感動ものです。

アニメーションできるのは Word Press で扱う全てのブロックで、アニメーションの種類も豊富で、パラメーターも細かくいじれるので、自分の思うがままに操れます。

大まかに、フェード、フリップ、スライド、ズームの4パターンがあって、それぞれのパターンを選ぶと、スライドならどの方向からスライドするかなど、更に細かい指定ができます。

その指定が終わると、スライドする時間や、スライドし始めるまでのディレイタイムの指定ができます。

更には Advanced Setting というボタンがあり、それをクリックすると、一度だけ実行(once)や、上端に来た時に逆順のアニメーションを行う(Mirror)、そして速度曲線を選べたり、アンカーポイントとして、ブロックがアニメーションし始めるトリガーの位置を調整したりできて、もう至れり尽くせりでした。

徐々に自分がやりたいことを出来るようになってきているので、楽しいですね。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です