jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

CSS3では要素に対してアニメーションを追加するアニメーションプロパティが追加されました。

このプロパティを使うと要素を動かしたり回転させたり移動させるなどの従来はスクリプトなどを使わなければできなかったことがCSSのみでできます。

そこでここではそのアニメーションプロパティとjQueryを組み合わせてさらに複雑な１つ１つの文字を上下に揺らすアニメ効果をつける方法について解説します。

１文字だけを揺らす方法

アニメーションプロパティを文字に対して適用すると次のように上下にゆらゆらする文字を作れます。

１つ１つの文字を別々に揺らす方法を解説する前にこのように上下に揺れる文字をCSSで作る方法を解説します。

上の例のように上下にゆらゆらしている文字を作るには次のようなspan要素を作成します。

<span class="swing">あ</span>

「swing」というクラスを割り振ってあります。

この要素に対して次のようなCSSを適用すると上下に揺れるアニメ効果が付きます。

.swing
{
  animation-name: anime;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  transform : translateY(-20px);
  color: red;
}

@keyframes anime
{
  from{ transform : translateY(-20px); }
 
  50%{ transform : translateY(40px); }
  
  to{ transform : translateY(-20px); }
}

上のCSSコードに@keyframesという@規則がありますが、この中でアニメーションを定義しています。@keyframesは次のような書式を持ちます。

@keyframes アニメーション名
{
  from{
    /** 開始時のCSS */
  }

  to{
    /** 終了時のCSS */
  }
}

fromブロックに開始時、toブロックに終了時の要素のCSSを定義します。この２つのブロックの間には0%～100%の間で細かくアニメーションのためのCSSを設定することが可能です。

そして上下に揺らしたい要素に対して次のアニメーションプロパティを設定しています。

• animation-name
  @keyframesで定義されたアニメーションを渡す
• animation-duration
  １つのアニメーションの実行時間。2sは2秒を表す
• animation-iteration-count
  アニメーションを繰り返す回数。「infinite」を指定するとループする

この他にもアニメーションプロパティはありますが文字を上下に揺らすならこれらのプロパティを指定するだけで十分です。

またここではコードが長くなりすぎるので省略しますが対応していないブラウザにも対応させたい場合は次のようにベンダー接頭辞をつけます。

-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;

１つ１つの文字をばらばらに揺らす方法

１つの文字を揺らすだけならCSSで十分ですが文字を別々に揺らしたいといった場合はjQueryを使うと要素に動的にCSSプロパティを設定できるので楽です。

まず次のように揺らしたい文字１つ１つをspan要素として定義します。

<div id="swing_text" style="margin-top: 30px;">
<span>ゆ</span><span>ら</span><span>ゆ</span><span>ら</span>
</div>

span要素の入ったdiv要素には「swing_text」などの分かりやすいid名をつけてください。

そしてそのdiv要素の１つ１つのspan要素に対して次のCSSを指定します。

#swing_text span
{
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  transform : translateY(-20px);
  color: red;
}

@keyframes anime
{
  from { transform : translateY(-20px); }
  
  50% {  transform : translateY(40px); }
  
  to { transform : translateY(-20px); }
}

@keyframesでアニメーションの定義をしていますが、このCSS内では要素に対してアニメーションを指定しません。

代わりに次のようにjQueryを使ってdiv要素内の全てのspanに対してアニメーションプロパティを動的に追加します。

$(function(){
  /** div#swing_textの子要素をすべて取得 */
  var spans = $("#swing_text").children();

  /** 子要素に対して個別にアニメーション指定 */
  for(var i = 0; i < spans.length; i++){
    e = spans[i];
    $(e).css("animation-name", "anime");
    $(e).css("animation-duration", "1.7s");
    $(e).css("animation-iteration-count", "infinite");
    $(e).css("animation-direction", "aleternate");
    $(e).css("alternate-timing-function", "ease");
    $(e).css("animation-delay", "" + (i / 5) + "s");
  }
});

ここでcss関数を使ってanimation-nameなどのCSSプロパティに値をセットしています。

全ての要素に同じプロパティを設定するならCSSでも可能ですが、このスクリプト内では次のように文字ごとにアニメーションの開始時間をずらしています。

$(e).css("animation-delay", "" + (i / 5) + "s");

animation-delayプロパティはアニメーションの遅延時間を設定するプロパティでここではインデックスがi番目のspan要素に対して(i / 5)秒だけ遅らせることで各要素の開始時間を別々に指定しています。

例えば2番目の要素ならインデックス番号は i=1 となるので0.2秒だけ遅れると考えてください。

ブラウザでは次のように文字が波打ってアニメーションします。

See the Pen ゆらゆら文字(標準) by kaz1503 (@kaz1503) on CodePen.dark

アニメーション時間や遅延時間をずらすと揺れる速さや波の大きさが変わります。

ゆらゆらする文字の応用例

最後に他のアニメーション効果と組み合わせるとこんな面白いこともできるという応用例をいくつか紹介します。

大きさが変わりながらゆらゆらする文字

@keyframesのなかでtransformプロパティに要素の大きさを変えるscale関数を渡すと揺れながら上に浮かび上がってくるようなアニメーション効果もつけられます。

次が実行例とコードです。

See the Pen ゆらゆら文字(大きさ変化) by kaz1503 (@kaz1503) on CodePen.dark

回転しながらゆらゆらする文字

@keyframesで中のtransformプロパティに要素をxyz方向に回転させるrotate関数を渡すと回転しながらゆらゆらする文字も作れます。

以下の実行例とコードではrotateX関数とrotateY関数を使うことで横軸と縦軸に回転させながら文字を揺らしています。

See the Pen ゆらゆら文字(回転) by kaz1503 (@kaz1503) on CodePen.dark

以上アニメーションプロパティとjQueryを使って文字をゆらゆら揺らすアニメ効果をつける方法について解説しました。プロパティの値を変えればオリジナリティのある面白いアニメが作れるので色々試してみてください。