jQueryでアニメーション:要素を動かす

jQueryでアニメーションをする際、要素を動かすのは比較的分かりやすい効果かと思います。もちろん目的にあった実装でないと目障りになってしまう可能性もありますが、アニメーションっぽさはぐんと上がり作っている最中も楽しくなります。要素の移動、要素の回転を掲載しています。

jQueryでアニメーション:要素を動かす

作成日
2014/10/07
更新日
2018年4月13日

jQueryでアニメーションをする際、要素を動かすのは比較的分かりやすい効果かと思います。もちろん目的にあった実装でないと目障りになってしまう可能性もありますが、アニメーションっぽさはぐんと上がり作っている最中も楽しくなります。jQueryでの動きの実装は、基本的にレイアウトを徐々に変更するイメージのため、CSSと密な関係にあります。ブラウザ対応の問題もありますし、jQueryではなくCSSの設定が問題で動かないこともあります。jQueryの要素を動かす方法をまとめるために、徐々に更新していこうと思っています。
主流になっているCSS3のアニメーションについてを追記(2018/04/13)しました。

animateで要素を移動させる

jQueryでタグや画像を縦や横に移動する方法をご紹介します。基本的な動きになると思いますが、CSSプロパティの値を変更させてボックスをずらすイメージの場合がほとんどだと思います。そのため、jQueryの記述が間違っていて動かないわけではなく、CSSの指定により動かない場合があることにも注意が必要です。
デモ1

「animate」top,leftで移動する

jQueryの「animate()」を使い、topやleft(bottomやright)の値を変化させて移動させる方法です。この方法は一般的かと思いますが、注意点として動かしたいタグのCSSプロパティ「display」や「position」を確認する必要があります。aタグやspanタグといった、インライン要素に指定しても動かない場合があるので注意してください。また、「position:absolute」などの場合は、親要素(タグをくくっている親タグ)に対して、「position:relative」を指定します。
HTML

CSS

jQuery

「animate」margin,paddingで移動する

先ほどとは別に、マージンやパディングもanimate()が動作するので、それらを利用して動作させます。この場合、パディングは中身を広げるイメージなので、サイズが変わっていることにも注意してください。また、マージの場合はそれによって他の要素にも影響しますので、レイアウトにも注意が必要です。

HTML

CSS

jQuery

要素を回転させる

要素を回転させる方法として、CSS3のプロパティ「transform」の「rotate」を指定する方法がありますが、CSS3のため対応していないブラウザもあります。また、現在(2014.10.07)では「animate()」では対応していないので、一工夫が必要です。クロスブラウザ対応のjQueryプラグインもあるようですので使いやすいのを探してみてもいいかもしれません。
デモ2

「animate」stepを利用して、横に回転させる

少し調べてみると、プラグインを使用せずに回転させる方法が見つかりました。以下のページよりご確認できます。
参考サイト:http://www.softel.co.jp/blogs/tech/archives/4290

「setInterval」を利用して、横に回転させる

動作はほとんど同じですが、若干重い気もします。
HTML

CSS

jQuery

jQueryのアニメーションとCSS3のアニメーションについて

少し追記…jQueryのアニメーションとしてこの記事を投稿していますが、最近では既にCSS3の利用が普及しており、CSS3でアニメーションを行うのが主流になってきている印象があります。ブラウザ対応などに注意が必要ではありますが、現在ではモダンブラウザ + IE11 + スマホに対応していればOKのような風潮があります(もちろんクライアントワークでは確認は必要ですが)。
CSS3のアニメーションにはいくつか種類があるのですが、要素自体を動かすだけならばCSS3で完結してしまいます。しかし他の要素をクリックした時にアニメーションさせるなど、複雑な処理を行いたい場合にはjavascriptの力は必要になってきます。
以下のような流れになります。

  1. 1) CSS3で特定のclassに対してアニメーションの記述
  2. 2) ユーザーが要素をクリック
  3. 3) javascriptでclassをつける
  4. 4) classに設定したアニメーションが実行

CSS3で完結する例

  • 要素Aをマウスオーバーした時に要素Aをアニメーション
  • 要素Aを無限にアニメーション

CSS3とJavascriptが必要な例

  • 要素Bをクリックした時に要素Aをアニメーション
  • ページが完全に読み込まれた後に要素Aをアニメーション
  • […] 述しておきます。一時期まではアニメーションと言えばjQueryというほど、jQueryのanimate()を利用してアニメーションするのが流行りましたが、CSSでアニメーションする方が多くなってきて […]

  • コメントを残す

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

Category

Archive