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

Pocket
LINEで送る

Animate it!


よく、お洒落なサイトなんか見ると、こんな感じで、ページをスクロールすると、フワッとタイトルや文章、画像などが浮き出てくるのを見かけますよね。そんなアニメーションをJqueryやCSSなどの知識、一切なしで、いろいろと実装できちゃうWordpressプラグインが「Animate it!」です。

インストールも、ダッシュボードのプラグインの新規追加で、「Animate it!」を検索、インストール、有効化で終了です。(^^)

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

Animate it! 設定画面

 

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

Animate it のアイコン

 

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

Animate it! アニメーション設定画面

 

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

 

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

animate it! オプション設定画面

 

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

Animate it! コード

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

ほっこり
安曇野屋

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

 

 

Pocket
LINEで送る

YASUKE YAMURA

コメントを残す

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

ツールバーへスキップ