WordPress備忘録　Animate it!　知識なしでページに様々なアニメーションをつけられるプラグイン

有効化すると、ダッシュボードの設定の項目に「Animate it!」の項目が出来るので、それをクリックすると、以下のような設定画面が開いてきます。設定と言っても、スマートフォンやタブレットで、アニメーションを有効にするかどうか、くらいで、設定というほどのものもありません。

設定が終ったら、次に投稿画面を開くと、以下のように、ビジュアルエディタの中に「Animate it!」のアイコンが追加されていますので、アニメーションをつけたい部分を選択して、「Animate it!」のアイコンをクリックします。

開いて来た画面でアニメーションの設定をします。
Animationの項目には、横の▼をクリックすると、沢山のアニメーションパターンの中から動作を選ぶ事ができます。Delayは、ロード時やスクロール時などの、指定したアクションからアニメーションを動作させるまでの時間です。Durationは、指定したアニメーションを行う時間です。時間を短くすれば動きが早くなり、遅くすれば、動きがゆっくりになります。Timingは動作の加速や減速などの指定です。一通り指定が終ったら、下の赤い「Animate it!」というボタンを押すと、上の赤い丸が動いて、動作を確認できます。

上の図を見てもらうと、「Entry」という画面が開いているのが分かると思いますが、横の「Exit」を開いても、同じ設定画面が開きます。こちらは、「Entry」で設定したアニメーションの後に、続けて、アニメーションを指定する場合に設定します。例えば、ボールがバウンドしてるようなアニメーションを作る場合なんかに、使うといいんじゃないかと思います。

そして、次に、その横の「Options」を開きます。
「Animation Repeat」で、アニメーションの繰り返しを指定します。「Infinite」がループですね。「Keep Element Final State」は基本的に「Yes」のままでいいと思います。そして、「Animate On」で、アニメーションを動作させるアクションを指定します。ページ読み込みと同時にアニメーションを動作させるなら、「Load」ですし、例えば、スクロールした時に、フワッと表示させるような場合は、「Scroll」、マウスポインタが乗った時に動作させるなら「Hover」って感じです。一通り指定が終ったら、最後に、緑色の「Insert」ボタンを押します。

すると、アニメーション指定したものの前後に下のようなコードが挿入されます。

このコードは、編集画面で見えてるだけで、公開されたページでは、見えなくなり、そのかわり、下のようにアニメーションが実装されます。(^^)

どうでしたか？
JqueryやCSS3の知識が一切なくても、ただ項目を設定するだけで、様々なアニメーションを実装出来てしまう「Animate it!」は、なかなかの優れものだと思います。これなら、うまく使えば、いろいろな動作がついた、お洒落なページが知識なしでも、作れてしまいそうですよね！！(^^)