jQueryで簡単にできる！アニメーションやスライドショーの作り方

jQueryの学習がある程度進んだら、早速自分でも何かWebコンテンツを作ってみたいと思う人も少なくないでしょう。

そんな時に、まず試してみたい練習サンプルとしてアニメーションの実装や画像を利用したスライドショーを作ってみることをオススメします。なぜなら、それほど難しくないにも関わらず成果物として面白いものが作れるからです。

しかし、いざ始めようと思ってもどこから手を付けて良いのか分からないという人もいるでしょう。

そこで、この記事では初心者でも今日からjQueryを利用した簡単なサンプル開発について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

アニメーションを作る

この章では、jQueryによるアニメーションの構築でもっとも基本となるメソッドについて見ていきましょう。主に、animate()の使い方を中心に他のメソッドについても学んでいきます。

animate()の使い方

jQueryにはちょっとしたアニメーションを簡単に実装できる便利なメソッドがいくつか提供されているのですが、もっとも基本になるのがanimate()メソッドです。

animate()メソッドは引数にCSSプロパティを設定するだけで、簡単に任意のアニメーションを実行することができます。例えば、h1要素の文字サイズを大きくするには次のように記述します。

$('h1').animate({
    'fontSize': '128px'
});

引数に指定しているプロパティは【font-size】ではなく【fontSize】というキャメルケースによる表記になることに注意しましょう。

実行すると、現在の文字サイズから指定した128pxまでスムーズにアニメーションしながら変化していくのが分かります。ちなみに、変化していく時間は第2引数で調整することも可能です

$('h1').animate({
    'fontSize': '128px'
}, 2000);

この例では、第2引数に【2000】と設定しているのでおよそ2秒間かけて文字のサイズが変化していくというわけです。

ここまでのサンプルデモを以下に貼り付けておくので、ぜひ参考にしてみてください！

See the Pen jQuery-sample (animation) by sato ken (@s_masato) on CodePen.

複数のアニメーションを連結する

animate()はメソッドチェーンで複数連結することも可能です。

つまり、複数指定したアニメーションを繋げることで、よりダイナミックなコンテンツが作れるというわけです。

例えば、h1要素のテキストを左右にアニメーションさせてみましょう。まずはBody要素の左上を基準にするために、positionをabsoluteに設定しておきます。

h1 {
  position: absolute;
}

次に、leftプロパティを使って次のようにチェーンを繋ぎます。

$('h1').animate({'left': '100%'}).animate({'left': '0'});

100%にすることで左から一番右側へアニメーションします。そのあとに、leftプロパティを0にすることで、再び一番左へ移動していくわけです。

この仕組みを活用すれば、DOM要素のアニメーションは自由自在になります。

$('h1').animate({'left': '100%'})
          .animate({'left': '40%'})
          .animate({'fontSize': '96px'})
          .animate({'left': '100%'})
          .animate({'left': '0'})

実行結果は以下のデモを確認してみてください！

See the Pen jQuery-sample (add animation) by sato ken (@s_masato) on CodePen.

アニメーション系のメソッドを活用する

jQueryにはanimate()以外にもアニメーションを実現する便利なメソッドがいくつか提供されているので、ここで3つほど合わせてご紹介しておきます。

1つ目はfadeOut()メソッドです。

これは対象要素を少しずつ透明にしていき、最終的にCSSでdisplay:noneを指定したのと同じように非表示にしてしまうメソッドになります。まさに、フェードアウトさせるためのメソッドと言えるでしょう。

$('h1').fadeOut(3000);

この例では、h1要素を3秒間かけて少しずつ非表示にしていきます。

2つ目はfadeIn()メソッドです。

これはfadeOut()と逆の性質があり、display:noneが指定されている要素に対して少しずつ表示させていくというメソッドになります。

$('h1').fadeIn(2000);

この例では、2秒間かけてh1要素を少しずつ出現させていきます。

3つ目はfadeToggle()メソッドです。

これはfadeOut()とfadeIn()を交互に繰り返すようなイメージのメソッドになります。つまり、表示と非表示を繰り返すことができるわけです。

setInterval(() => {

    $('#toggle').fadeToggle();

}, 1000);

この例では、setInterval()を利用して1秒間隔で表示と非表示を繰り返します。

これらのアニメーションがどのように処理されているのかについては、以下のサンプルデモでぜひ確認をしておいてください！

See the Pen jQuery-sample(animation method) by sato ken (@s_masato) on CodePen.

スライドショーを作る

この章では、jQueryを活用した基本的なスライドショーの作り方について見ていきましょう。複数枚の画像をクリック操作によって次々とスライドさせて閲覧する機能の作り方を学んでいきます。

画像を準備する

スライドショーを作るにあたり、まずは複数の画像とスライドさせるためのボタンを配置しましょう。

今回のサンプルでは次のようにHTMLを構築してみました。

    
    
    

前へ
次へ

画像は好きなだけ追加しても大丈夫です。

ボタンはシンプルに、前へ戻るのと次の画像を表示するための2種類だけ配置しています。

画像のサイズは揃えておいた方が良いのですが、面倒な場合はCSSで強制的に変更しても良いでしょう。

#slide img{
        width: 600px;
        height: 400px;
        display: none;
}

画像要素はすべてdisplay:noneによって非表示にしておくのがポイントになりますので、忘れないようにしておきましょう。

スライドショーを作る

準備ができたところで、早速スライドショーを作っていきましょう。

まず最初に、配置した画像要素をすべて取得しておきます。

const images = $('#slide img');

let counter = 0;
let index = 0;

画像要素は変数imagesに格納しています。また、画像をスライドさせる時に利用するcounter / indexの変数もついでに初期化しておきましょう。

スライドショーのロジックですが、基本的な流れとしては以下の通りです。

ボタンがクリックされた
↓
現在表示している画像を非表示にする
↓
次の画像要素を取得
↓
その画像を表示する
↓
繰り返し…

これをjQueryで実装するわけです。

つまり、クリックイベント処理の中に画像の非表示と表示を実装すれば良いのです。次のサンプルコードを見てください。

$('#next').click(() => {
  images.eq(index).css('display', 'none');

  index = ++counter % images.length;
  
  images.eq(index).fadeIn();
})

いきなり難しく感じたかもしれませんが、これから解説するので安心してください。

ここでポイントになるのがeq()というメソッドです。これは、複数の同じHTML要素をインデックス番号で指定できるのですが、今回の例で言うと何番目の画像なのか？ということを指定できるわけです。

つまり、eq(0)は1番目の画像のことであり、eq(2)は3番目の画像を意味します。

今回は3つしか画像要素がないので、0 ~ 2の数値を指定すれば良いのですがクリックするたびに順番通り指定するにはちょっとしたコツがいります。

次の計算式を見てください。

0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2
6 % 3 = 0
7 % 3 = 1
8 % 3 = 2
・
・
・

%を使うと割り算した余りを求めることができます。つまり、上記の例だと3で割り算をし続ける限り余りは必ず0 ~ 2のいずれかになるということです。

この計算をスライドショーのサンプルに当てはめると次のようになるわけです。

index = ++counter % images.length;

counterは毎回1ずつ繰り上がる変数で、images.lengthは画像要素の総数になります。そのため、これらを割り算した余りを求めればクリックするたびに画像要素を順番に取得できますね。

もう一度、先ほどのサンプルコードを見てみましょう。

$('#next').click(() => {
  images.eq(index).css('display', 'none');

  index = ++counter % images.length;
  
  images.eq(index).fadeIn();
})

クリックされたら、まず最初に現在表示されている画像を非表示にします。次に、計算で求めた次の画像要素を取得してフェードインしながら表示させているわけですね。

これで基本的なスライドショーは完成です！

以下のサンプルデモで動作を確認しておきましょう。

See the Pen jQuery-sample by sato ken (@s_masato) on CodePen.

ちなみに、戻るボタンは++counterを–counterにするだけなので簡単ですね。

まとめ

今回は、jQueryで簡単に実現できるアニメーションやスライドショーの作り方について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！