40代高卒者が製造業からIT転職する【アニメーション】

こんにちは、フローです。

前回は、jQueryとJavaScriptの記述方法を書きました。

ちょっと難しいので、何度も見返して勉強して下さい。私も勉強致します。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【jQuery】

1 jQueryアニメーション
- 1.1 下から出て来るアニメーション
- 1.2 右から左からアニメーション
2 まとめ
- 2.1 関連

jQueryアニメーション

今回は、jQueryを使ってWEBサイトに動きをつける、アニメーションの記述を書いていきたいと思います。

要素がふわっと出てくるようなアニメーションを実現するためには、

jQueryの fadeIn() メソッドを使用することができます。

また、CSSの transition プロパティを使用して、

アニメーションの速度やイージングを調整することもできます。

以下に、jQueryを使用して要素をふわっと出現させる例を示します。

HTML:

<div id="my-element">
  <p>ここに要素の内容を記述します。</p>
</div>

$(document).ready(function() {
  $("#my-element").fadeIn(2000); // 要素を2秒かけてふわっと表示する
});

CSSを使用して、

アニメーションの速度やイージングを調整するには、以下のように要素にスタイルを指定します。

#my-element {
  opacity: 0; /* 要素を初期状態で非表示にする */
  transition: opacity 1s ease-in-out; /* 1秒かけてフェードインする */
}

jQueryでアニメーションを実行する前に、

要素を非表示にしておく必要があります。

そのため、上記の例では opacity: 0; を指定しています。

また、

transition プロパティには、アニメーションのプロパティ名 (opacity）と、

アニメーションの速度やイージングを指定する値 (1s ease-in-out) を指定しています。

下から出て来るアニメーション

下から出てくるアニメーションを実現するには、

jQueryの slideDown() メソッドを使用することができます。以下に例を示します。

jQuery:

$(document).ready(function() {
  $("#my-element").slideDown(2000); // 要素を2秒かけて下からスライドしながら表示する
});

この例では、要素が下からスライドしながら表示されるように、

slideDown() メソッドを使用しています。

また、アニメーションの速度を調整するために、

引数として 2000 を指定しています。この値はミリ秒単位で、2秒を表しています。

右から左からアニメーション

要素が右から出てくるアニメーションを実現するには、

jQueryの animate() メソッドを使用することができます。以下に例を示します。

HTML:

<div id="my-element">
  <p>ここに要素の内容を記述します。</p>
</div>

jQuery:

$(document).ready(function() {
  $("#my-element").css({"left": "-100px"}); // 要素を左に配置する
  $("#my-element").animate({"left": "0px"}, 2000); // 要素を2秒かけて右からスライドしながら表示する
});

この例では、

まず css() メソッドを使用して、要素を左に配置します。

その後、animate() メソッドを使用して、要素を右からスライドしながら表示します。

animate() メソッドでは、

移動前の位置（左側から -100px の位置）と、

移動後の位置（0px の位置）を指定しています。

また、アニメーションの速度を調整するために、

引数として 2000 を指定しています。この値はミリ秒単位で、2秒を表しています。

要素が左から出てくるアニメーションも同様に実現することができます。

要素を左側に配置し、animate() メソッドで右に移動するように指定するだけです。

以下に例を示します。

jQuery:

$(document).ready(function() {
  $("#my-element").css({"left": "100%"}); // 要素を右に配置する
  $("#my-element").animate({"left": "0px"}, 2000); // 要素を2秒かけて左からスライドしながら表示する
});

この例では、

要素を右に配置した後、animate() メソッドで左に移動するように指定しています。

left の値に 100% を指定することで、要素を右側に配置することができます。