こんにちは、ウェブ担当の菅井です。
今日はWordpressの無料プラグイン「Animations for Blocks」をご紹介します。
これは何かというと、AOS.jsというウェブ制作ではメジャーなアニメーションライブラリをベースとしたWordpressのプラグインで、使い勝手がかなりjsのAOSに近いです。
WordPressのアニメーションつけのプラグインは色々とありますが、これが一番自分的にぴったりしっくりきたので、おすすめしたいと思います。無料ですし気軽に試してみてください!
STEP1:プラグインをインストールする
プラグインをインストールします。プラグイン検索画面から「Animations for Blocks」を検索するか、以下からダウンロードしてください。無料で使えます。
インストールできましたら「有効化」してください。
STEP2:アニメーションをつけたいブロックに設定を加える
固定ページでも記事のページでもなんでもいいです。アニメーションさせたい要素(ブロック)に先ほどのプラグインの設定を施していきます。
アニメーションさせたいブロックをクリック選択して、右サイドバーを見てみてください。
「Animation」という設定エリアが表示されているかと思います。
この「Fade」「Flip」「Slide」「Zoom」いずれかをクリックすると、今度は詳しい数値設定画面が表示されますので、好きなものをクリックしてみてください。
そうすると今度はどっち方向から出てくるか?とか選べるようになってますので、お好みでクリックしてみてください。選択しているブロックに早速アニメーションがかかっていますので、プレビュー的な感じで見やすいですよね。
基本の設定
DURATION | アニメーションそのもののスピード調整 |
---|---|
DELAY | スクロールした時に発火を遅らせる調整 |
追加の設定
「Advanced setting」という項目があります。ここをクリックすると詳細設定画面が表示されます。
色々英語で出てくるんですが、重要なのは1つだけです。
それは「アニメーションを1回だけにするか」というスイッチです。
あとはeasingとかオフセットとか発火距離なども設定できるので、HTMLでAOSを使ったことのある人には馴染みやすい設定になっているかと思います。
アニメーションを手軽に使えるプラグインはこれ一択
いかがでしたか?これなら簡単に、問題なくWordpressのブロックエディタにアニメーションをつけることができるかと思います。
あれこれ試しに導入してみて、どれもしっくりこなかったのですが、やっと出会えた無料プラグインでした。
作ってくださった方に大感謝し、今日もWordpress制作頑張りましょう!