【jQuery】アニメーション作成の基本と７つの事例ついて

jQueryによるアニメーション作成

jQueryを活用したアニメーションとして、フェードインやフェードアウトの仕組みやパララックスの機能、ローディングアニメーションなどがあります。

今回は７つの活用事例についてご紹介します。

フェードイン/フェードアウトの作成

要素を徐々に表示したり非表示にするアニメーションを実現するために、jQueryのfadeIn()とfadeOut()メソッドを使用します。

以下は、クリックされた要素をフェードアウトさせる例です。

$("button").click(function(){
  $("p").fadeOut();
});

パララックスの作成

背景と前景の2つの要素をスクロール速度の異なる方法で動かすことで、奥行きを表現するアニメーションをパララックスと呼びます。

以下は、スクロールするたびに背景画像を徐々にずらす例です。

$(window).scroll(function() {
  var yPos = -($(window).scrollTop() / 2); 
  var bgpos = '50% '+ yPos + 'px';
  $('body').css('background-position', bgpos );
});

スライドショーの作成

複数の画像をスライドさせるアニメーションを実現するために、jQueryのanimate()メソッドやスライドショー用のプラグインを使用することができます。

[rml_read_more]

以下は、スライドショー用のプラグインを使用した例です。

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);

モーダルウィンドウの作成

クリックされた要素に応じてポップアップウィンドウを表示するアニメーションを実現するために、jQueryのfadeIn()メソッドやCSSのdisplayプロパティを使用することができます。

以下は、モーダルウィンドウを表示する例です。

$("#openModal").click(function(){
  $("#myModal").fadeIn();
});

$("#closeModal").click(function(){
  $("#myModal").fadeOut();
});

スクロールアニメーションの作成

スクロール時に要素が表示されたり非表示になったりするアニメーションを実現するために、jQueryのscroll()メソッドとanimate()メソッドを組み合わせることができます。

以下は、スクロール時に要素を表示する例です。

$(window).scroll(function() {
  $('.fadeInUp').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 200){
      $(this).addClass('fadeInUp-animate');
    }
  });
});

アコーディオンメニューの作成

クリックされた要素に応じてコンテンツを表示したり非表示にしたりするアニメーションを実現するために、jQueryのslideDown()メソッドとslideUp()メソッドを使用することができます。

以下は、アコーディオンメニューを表示する例です。

$(".accordion-header").click(function(){
  $(this).toggleClass("active");
  $(this).next().slideToggle();
});

まとめ

これらのjQueryアニメーションを組み合わせることで、より複雑な動きや効果を表現することができます。

ご参考ください。