★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

CSSやjQueryで要素をアニメーションさせて表示する2つの方法

要素をアニメーションさせるには2つの方法があります。

1つめはjQueryのアニメーション関数を使う方法で2つめはCSSのみで要素にアニメーションプロパティを指定する方法です。

どちらでもアニメーションができますが、できることが若干異なります。

ここではその違いも踏まえてこの2つの方法で要素をアニメーションさせる方法について解説します。

jQueryのみでアニメーション

まず1つめはjQueryだけで要素をアニメ表示する方法です。

要素に対してアニメーションをかける関数はいくつかありますが、ここではfadeIn関数を使います。構文は次の通りです。

fadeIn([ミリ秒], [コールバック関数])

1つめの引数にアニメーション時間(ミリ秒)、2つめにはアニメーション終了時に実行する関数を渡します。2つめに関しては省略可能です。

ではこれを使って要素をアニメ表示する例を紹介します。ここでは表示する要素とクリックすると要素を表示するボタンを次のように定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

表示する要素は画像要素が入った「image_box」というidが割り振られた要素です。

そしてボタンを押すと要素を表示するスクリプトは次の通りです。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box").fadeIn(1000);
});

これで要素が1秒間フェードインしながら表示されます。実際にどのように動作するかは下のボタンを押して確かめてください。

この方法を使う利点は要素に対してアニメーション関数を実行するだけなので簡単なことです。

ただ細かい操作をしようとすると複雑なコードを書かなければならないのでフェードアウトなどの単純な処理をするときはこの方法が役立つと思います。

CSS+jQueryでアニメーション

次はCSSとjQueryを組み合わせて要素をアニメ表示する方法を紹介します。

CSSで要素をアニメーションするには次のようなanimation関係のプロパティを要素に指定します。

  • animation-name
    要素で実行したアニメーション名を渡す
  • animation-duration
    アニメーション1回当たりの実行時間。「2s」のように秒単位(s)をつけた値を渡す
  • animation-delay
    アニメーションの遅延時間。「2s」を指定すると2秒後にアニメーションが開始する
  • animation-iteration-count
    アニメーションの繰り返し回数。「inifinite」を指定すると無限ループする

他にもanimation関係のプロパティはありますが、基本的にはこれらのプロパティがよく使われます。

そしてanimation-nameプロパティに渡すアニメーションは@keyframesという@規則内で定義されます。

例えば要素の幅が100pxから200pxまで変形するようなアニメーションをさせたい場合は次のように@keyframesでアニメーションを作れます。

@keyframes anime
{
  from{
    width: 100px;
  }
  to{
    width: 200px;
  }
}

fromブロックにアニメ開始時の要素のCSS、toブロックにアニメ終了時の要素のCSSを書きます。fromとtoの間には0%~100%の範囲でいくらでもブロックを作れます。

そして要素にこのアニメーションを適用するには次のようにanimation-nameプロパティに対してアニメ名を渡します。

.box{
  animation-name: anime;
  animation-duration: 3s;
}

ではこれを使って要素を表示する例を紹介します。

まず次のように表示する要素とクリックすると要素を表示するボタンを定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

上の例では画像要素の入ったdiv要素を表示するものとします。

そしてCSSで次のようなアニメーションを定義します。

@keyframes fadein
{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

透過度が0(透明)から1(完全不透明)に変化するようなアニメーションです。

そしてボタンがクリックされたときに要素を表示するために次のスクリプトを書きます。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box")
        .css("display","block")
        .css("animation-name", "fadein")
        .css("animation-duration", "3s");
});

このスクリプトではcss関数を使ってボタンクリック時にCSSプロパティを設定しています。つまりボタンクリック時に要素に次のCSSを適用するのと同じです。

animation-name: fadein;
animation-duration: 1s;
display: block;

これでjQueryでfadeIn関数を使った場合と同じように要素がフェードインしながら表示されます。実際にどう表示されるかは下のボタンを押して確かめてください。

この方法の利点はCSSが使えるので複雑なアニメーション効果をつけたい場合でも複雑なコードを書かなくて済むという事です。

例えば次のようなアニメーションを定義すれば要素をフェードイン&回転しながら表示といった複雑なアニメ効果もつけることが可能です。

@keyframes fadein
{
  from{
    opacity: 0;
    transform: rotateX(180deg);
  }
  to{
    opacity: 1;
    transform: rotateX(360deg);
  }
}

transformプロパティにrotateX関数を渡すことでX軸方向に180度画像を回転させています。

実際にどう表示されるかは下のボタンをクリックしてください。

以上jQueryのみとCSSとjQueryを組み合わせて要素をアニメ表示する2つの方法について紹介しました。簡単なアニメ表示ならjQueryのみ、複雑なアニメ表示ならCSSも利用といった感じで使い分けるといいと思います。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press