要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

ボタンにホバー・クリックしたり、あるいは何か動作をしたときに回転やスライドなどアニメーションがついているサイトなどを見たことはありませんか？

個人サイトやブログではあまり見かけませんが、Webサービスなどではサイト内でそのような演出を見ることが多いです。

ああいう効果がさりげなくついているとユーザーにとっても楽しいサイトになりますよね。

ではどうやってあのような演出をしているかというと大抵はjQueryというjavascriptライブラリが使われています。しかも簡単な数行のコードで複雑なアニメーションを要素につけることができるのでとても便利です。

そこでここではjQueryを使った要素のアニメーション表示の方法と表示例をいくつか紹介します。

要素のアニメ表示のさせ方

まずアニメーション例を紹介する前に要素をどのようにアニメ表示させるのかを解説します。

ここでは解説例として要素を回転させながら表示させる例を紹介します。

まず次のように要素をクリックしたときにアニメ表示するボタンとアニメ表示される要素を用意します。

<button id="btn_show">要素をアニメ表示</button>

<div id="example"></div>

そして回転させながらアニメ表示させる要素に次のCSSを適用します。

#example{
  transition: transform 2s;
  transform: rotateY(360deg);
  display: none;
}

まず要素をアニメ表示させるので最初は「display: none」で要素を非表示にしています。

そして「transition: transform 2s」と指定することでtransformプロパティが変化したときに２秒かけてアニメーション変化させることができます。

またこの例では要素を回転表示させるのでtransformプロパティに「rotateY(360deg)」という回転関数を渡します。このプロパティには回転の他に移動・傾斜・拡大縮小などの関数を渡すことが可能です。

次にボタンを押されたときに要素をアニメ表示するスクリプトを書きます。

$(function(){
  $("#btn_show").on("click", function(){
    $("#example").fadeIn(1500);
    $("#example").css({
      "transform": "rotateY(0deg)"
    });
  });
}

まずfadeIn関数を呼び出すことで要素をフェードインさせながら表示します。

そしてアニメ表示に重要なのは要素のtransformプロパティを書き換えている次のスクリプトです。

$("#example").css({
  "transform": "rotateY(0deg)"
});

事前にtransitionプロパティを指定していたのでこのようにcss関数でtransformプロパティを書き換えるとその状態までアニメーションされるようになります。

実際にどのように動くかは次のコードと実行例を見てください。

See the Pen 要素表示(クルクル回転) by kaz1503 (@kaz1503) on CodePen.dark

いろいろなアニメ表示

要素のアニメーション効果をいくつか紹介します。要素のid名などは自分のサイトに合った適切なものに書き換えてください。

要素を拡大しながら表示

transformプロパティのscale関数を使うと要素を拡大・縮小させられるのでそれを使って要素を徐々にでかくしながら表示できます。

以下はそのコード&スクリプト例です。

HTMLコード

<button id="btn_scale">拡大しながら表示</button>
<div id="scale"></div>

CSSコード

#scale{
  transition: transform 1.5s;
  transform: scale(0);
  display: none;
}

スクリプト

$(function(){
  $("#btn_scale").on("click", function(){
    $("#scale").fadeIn(1500);
    $("#scale").css({
      "transform": "scale(1)"
    });
  });
});

実際にどのように動くか確かめるには以下のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(拡大) by kaz1503 (@kaz1503) on CodePen.dark

要素を左からスライド表示

jQueryにはslideDownという要素をスライドダウンする関数がありますが、transformプロパティのtranslate関数を使うと左からスライドさせて表示させることも可能です。

以下はそのコード＆スクリプト例です。

HTMLコード

<button id="btn_slideleft">左からスライド表示</button> <button id="btn_hide">隠す</button>

<div id="slideleft"></div>

CSSコード

#slideleft{
  transition: transform 1.5s;
  transform: translateX(-100%);
  display: none;
  
  width: 250px;
  height: 150px;
  margin: 12px;
  background-color: #58F;
}

スクリプト

$(function(){
  $("#btn_slideleft").on("click", function(){
    $("#slideleft").fadeIn(1500);
    $("#slideleft").css({
      "transform": "translateX(0)"
    });
  });
});

実際にどのように動くか確かめるには次のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(左からスライド) by kaz1503 (@kaz1503) on CodePen.dark

回転&拡大しながら要素表示

transformプロパティには複数の変形関数を渡せるので複数の効果をつけて回転させながら拡大表示といったことも可能です。

以下はそのコード＆スクリプト例です。

HTMLコード

<button id="btn_rotate_scale">左からスライド表示</button> <button id="btn_hide">隠す</button>

<div id="rotate_scale"></div>

CSSコード

#rotate_scale{
  transition: transform 1.5s;
  transform: rotateY(360deg) scale(0);
  display: none;
}

スクリプト

$(function(){
  $("#btn_rotate_scale").on("click", function(){
    $("#rotate_scale").fadeIn(1000);
    $("#rotate_scale").css({
      "transform": "rotateY(0deg) scale(1)"
    });
  });
});

実際の動作を確かめるには次のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(回転&拡大) by kaz1503 (@kaz1503) on CodePen.dark

以上jQueryで要素を変形させてアニメ表示させる方法について解説しました。複数の変形効果を組み合わせると面白いアニメーション効果が作れると思います。