• HOME
  • JavaScript
  • jQueryでアニメーションを設定する方法【animate】
  • JavaScript
  • jQuery
  • アニメーション

jQueryでアニメーションを設定する方法【animate】

jQueryでアニメーションを設定する方法【animate】

jQueryはWebページに動きをつけるためのJavaScriptのライブラリになります。動きをつけることでユーザーに注目してほしいところを強調したり、ユーザーが求めている情報だけを表示させて、利用しやすいページにすることができます。

ユーザーに伝えたいことや注目してほしい部分を動かすのによく使うのがアニメーションです。プレゼンテーションでパワーポイントを使ったことある方なら、聴講者に注目してほしいところにアニメーションをつけた経験はあると思います。

jQueryではanimateというメソッドを使えばWebページ上でアニメーションをつけることができます。本記事ではjQueryでanimateメソッドを使ってアニメーションをつける方法を解説します。

jQueryでアニメーションを設定するanimate()

jQueryでアニメーションを設定するにはanimeteというメソッドを使用します。具体的には、CSSプロパティを連続的に動かします。CSSでもある程度であれば、アニメーションを作ることは可能ですが、jQueryのほうがシンプルにたくさんの動きをつけることができます。

animateでは文字サイズを徐々に大きくしたり、要素を移動させたりすることができます。しかし、colorのように数字で設定できないプロパティは設定できないので気をつけてください。

animate()を使う方法

基本構文

animateの使い方について解説します。基本構文は以下の通りです。

$('セレクタ').animate({ CSSのプロパティ }, duration, easing, 関数);

CSSのプロパティは波括弧（{}）で囲います。CSSのプロパティはオブジェクト形式にする必要があるからです。

durationはアニメーションが終了するまでの時間を設定します。ミリ秒単位で入力するので数値に気をつけてください。1秒で変化させたい場合は1000とします。普段ではあまり目にしませんが、プログラミングの世界ではミリ秒はよく使うので慣れておくことをおすすめします。

easingはアニメーションの挙動を指定します。「linear」と「swing」の2種類です。swingの方が動きに変化があります。

関数はアニメーションが完了した後に何らかの処理をしたい場合に指定すると実行します。

duration、easing、関数は省略することが可能です。

クリックイベントなどと合わせて使う

animateメソッドはクリックすると強調したり、マウスが要素の上に乗ったら動きだすなどのようにイベントと同時に起こるように設定することが多いです。onやhoverイベントと一緒に使います。

ページが開かれた直後に開始する

Webページを閲覧していると開いたらアニメーションが始まるサイトを見たことがあると思います。animateを設定しておくことで、ページが開いた瞬間にアニメーションを始めることが可能です。

しかし、数字が設定できないCSSはできないので、ほかのメソッドと組み合わせて使うようにすることをおすすめします。

サンプルコード

文字の大きさを変化させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 class="big-font">ホバーして下さい。</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      'use stirct';

      $('.big-font').hover(function () {
        $(this).animate({ fontSize: 50 }, 2000, 'linear');
      });
    </script>
  </body>
</html>

ホバーして下さい。

要素を移動させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .move {
        height: 50px;
        width: 50px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="move">クリックして下さい</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      'use stirct';

      $('.move').on('click', function () {
        $(this).animate({ marginTop: 100 });
      });
    </script>
  </body>
</html>
クリックして下さい。

アニメーションを使うときの注意点

アニメーションを入れすぎない

アニメーションは入れすぎると見にくくなり、ユーザーが離れていく原因になる可能性があるので気を付ける必要があります。アニメーションは要素に動きがつくため、他に比べて目がいきやすいというメリットがあります。しかし、あまりに動きが多すぎるとみるポイントが分からなくなります。

アニメーションを入れる際は１ページの中で最も伝えたいこと一つにすることをおすすめします。他に動きをつけたいものがあれば、動きを小さくし、重要なものから離れた位置で動かします。

動きはシンプルにする

jQueryのanimateは大きく要素を動かすことができます。しかし、複雑に移動させたり、必要以上に大きく動かすとページ全体が見にくくなります。結果、Webページの滞在時間が短くなり、逆効果となります。動きはシンプルに適切なサイズを心掛けることをおすすめします。

文字サイズであれば、周りの文字サイズの1.2～1.5倍程度が目安です。2倍以上になると文字サイズが大きすぎてその他の情報が無視される可能性があります。

まとめ

アニメーションはユーザーに伝えたいことや注目してほしいことを強調するのによく使われます。商品やサービスの紹介ページではアピールポイントに使うとユーザーの目線を持ってくることができます。

しかし、むやみにアニメーションをつけると目障りに感じることもあります。使う際は無駄に使わず、本当に伝えたいところにのみ使うことをおすすめします。あくまで、ユーザー目線を忘れないことが大切です。

「simple is best」を心掛けてアニメーションをつけることが大切だと思います。