jQueryでのアニメーション方法

この記事は約6分で読めます。
広告
jQueryでアニメーションを作る方法の紹介です!
まずはデモでjQueryアニメーションを見てみよう。
ボタンを押したらボタンがおっきくなって、もう一度押すと小さくなるボタンです。

デモボタン

このデモのソースは以下になります。
HTML
<div class="btn"></div>
CSS
.btn {
  position: relative;
  display: block;
  margin: 40px auto;
  width: 320px;
  height: 64px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  background: #2b2f37;
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.7);
  transition: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, background;
  cursor: pointer;
}
.btn:after {
  content: "ボタンを大きくする";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.btn:hover {
  transform: scale(1.02);
}
.btn.active {
  background: rgba(40, 29, 255, 0.7);
  transform: scale(3);
}
.btn.active:after {
  content: "ボタンを小さくする  ";
}
.btn.active:hover {
  transform: scale(3.06);
}
jQuery
$(".btn").on("click", function() {
  if($(this).hasClass("active")) {
    // .btnに「.active」がついてたら
    $(this).removeClass("active");
  } else {
    // .btnに「.active」が無かったら
    $(this).addClass("active");
  }
});


デモの説明について。
HTMLで書いた「.btn」のdivに、CSSでスタイルを設定しています。
ボタン内のテキストも疑似要素「:after」で指定しています。
さらにCSSでクリック後のスタイルを「.btn.active」で指定しています。

CSSを書き終わったら、jQueryで「.btn」が押されたらの処理を書きます。
「.btn」が押された時に、「.btn」に「.active」の有無で処理を分けます。
「.active」が付いてなかったら「.active」を付けて、無ければ「.active」を外します。

これがjQueryでクラスの付け外しでアニメーションさせる方法です。
こうすることでHTMLに直接スタイルが記入されず、HTMLソースがキレイな状態を保つことができます。

jQueryでは「anime({})」や「css({})」も用意されているので
それでスタイルを上書きすれば同じような動きができますが、汎用性が無く、
もしボタンに他の処理を書く場合、手間がスゴイので出来れば「anime({})」や「css({})」のアニメーションは避けたいです!

以上!jQueryでアニメーションをする方法になります。
このクラスの付け外しでアニメーションする方法は色々できて
CSSの「keyframe」を使うと、さらに表現豊かにアニメーションすることができます。

次のデモはCSS「keyframe」を使った方法です。

keyframeを使ったアニメーションデモ

このデモのソースは以下になります。
HTML
<div class="btn2"></div>
CSS
.btn2 {
  position: relative;
  display: block;
  margin: 40px auto;
  width: 320px;
  height: 64px;
  border-radius: 12px;
  background: #2b2f37;
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.7);
  transition: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, background;
  cursor: pointer;
}
.btn2:after {
  content: "ボタンをブルブルする";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.btn2:hover {
  opacity: .8;
}
.btn2.active {
  animation: .01s buru-buru infinite;
}
.btn2.active:after {
  content: "ヤバいヤバい";
}
@keyframes buru-buru {
  0% { transform: translateX(0px); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
  100% { transform: translateX(0px); }
}
jQuery
$(".btn2").on("click", function() {
  if(!$(this).hasClass("active")) {
    // .btnに「.active」が無かったら
    $(this).addClass("active");
  } else {
    // .btnに「.active」がついてたら
    $(this).removeClass("active");
  }
});


デモの説明になります!
HTMLとjQueryは先ほどのデモとはクラス名が違うだけでやっていることは一緒になります。

CSSは「.active」が付くと「animation」が付くようになっています。
「animation」の「keyframe」には、「transform」で横にブルブルしているアニメーションが付くようにしています。

この様に、jQueryでアニメーションする方法は、クラスの付け外しで様々な動きができます。
jQueryでアニメーションするというより、CSSのアニメーションをjQueryでon/off切り替える感じですが
このクラスの付け外しで、思いのアニメーションを作ってみてください!
もし、説明が下手でよくわからない所があったらコメントで教えてください。
エンデ・バタローをフォローする
javascriptjQuery

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました