WordPressでAOSアニメーションが使える無料プラグイン「Animations for Blocks」の使い方

当サイトには広告が含まれています。

こんにちは、ウェブ担当の菅井です。
今日はWordpressの無料プラグイン「Animations for Blocks」をご紹介します。

これは何かというと、AOS.jsというウェブ制作ではメジャーなアニメーションライブラリをベースとしたWordpressのプラグインで、使い勝手がかなりjsのAOSに近いです。

WordPressのアニメーションつけのプラグインは色々とありますが、これが一番自分的にぴったりしっくりきたので、おすすめしたいと思います。無料ですし気軽に試してみてください!

目次

STEP1:プラグインをインストールする

Animations for Blocks
Animations for Blocks

プラグインをインストールします。プラグイン検索画面から「Animations for Blocks」を検索するか、以下からダウンロードしてください。無料で使えます。

WordPress.org
Animations for Blocks Allows to add animations to block editor blocks on scroll.
Animations for Blocks ダウンロードサイト

インストールできましたら「有効化」してください。

STEP2:アニメーションをつけたいブロックに設定を加える

固定ページでも記事のページでもなんでもいいです。アニメーションさせたい要素(ブロック)に先ほどのプラグインの設定を施していきます。

アニメーションさせたいブロックをクリック選択して、右サイドバーを見てみてください。
「Animation」という設定エリアが表示されているかと思います。

Animations for Blocks
この赤枠のところです

この「Fade」「Flip」「Slide」「Zoom」いずれかをクリックすると、今度は詳しい数値設定画面が表示されますので、好きなものをクリックしてみてください。

そうすると今度はどっち方向から出てくるか?とか選べるようになってますので、お好みでクリックしてみてください。選択しているブロックに早速アニメーションがかかっていますので、プレビュー的な感じで見やすいですよね。

基本の設定

DURATIONアニメーションそのもののスピード調整
DELAYスクロールした時に発火を遅らせる調整

追加の設定

「Advanced setting」という項目があります。ここをクリックすると詳細設定画面が表示されます。

色々英語で出てくるんですが、重要なのは1つだけです。
それは「アニメーションを1回だけにするか」というスイッチです。

Animations for Blocksの使い方
これで1回きりの発動になります

あとはeasingとかオフセットとか発火距離なども設定できるので、HTMLでAOSを使ったことのある人には馴染みやすい設定になっているかと思います。

アニメーションを手軽に使えるプラグインはこれ一択

いかがでしたか?これなら簡単に、問題なくWordpressのブロックエディタにアニメーションをつけることができるかと思います。
あれこれ試しに導入してみて、どれもしっくりこなかったのですが、やっと出会えた無料プラグインでした。

作ってくださった方に大感謝し、今日もWordpress制作頑張りましょう!

デザイン作るの難しい〜!と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください!
実績多数の女性クリエイターチームが、

どんなお悩みも解決します。

\ 南大阪・泉州でデザインのご依頼はこちら /

シェアお願いします!
  • URLをコピーしました!
目次