【JavaScript】マウスホバーで文字の表示、非表示アニメーションを実装【初心者向け】

今回はマウスホバーした際に文字を表示し、離したら消えるアニメーションをJavaScriptで実装する方法をご紹介します。

HTML、CSS、JavaScriptをそれぞれ説明していきますので、初心者や駆け出しの方でもわかりやすいかと思います。
簡単なCSSとJavaScriptでできるので、覚えるのも簡単です！

成果物のイメージ

イメージとしてはこのような感じです。

実装するコード

実際に実装するコードを見ていきましょう。

See the Pen マウスでアニメーション by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

それではひとつずつ説明していきます。

HTML

説明するまでもないかとは思いますが、マウスホバー用の<p>要素と、マウスホバーイベントで変化する用の<p>要素です。

それぞれ『id』を付与し、CSSとJSが設定できるようにします。

CSS

CSSではまずホバーする要素の位置がわかりやすいように『background-color』で背面のカラーをつけてます。

あとはそれぞれが近すぎないように『margin』で距離をとり、背面のカラーとマウスホバーの範囲を広げるため『padding』を設定してます。

「まず『margin』と『padding』がイマイチよくわからない…」って方は、『Progate』のようなサービスで基礎を学ぶとこから始めましょう！

変化する方は『opacity』を０にして要素を非表示にしておきましょう！

変化する方記述している『transition』は、簡単に言えば変化の速度のことです。
『１s』は、１秒かけて変化していく設定です。
もっと早くしたい場合は『0.5s』、遅くしたい場合は『２s』など微調整してください。

JavaScript

それでは本題のJavaScriptです。

まずは付与したidを取得して、それぞれを定数として定義しましょう。

const buttom = document.getElementById('buttom');

const di = document.getElementById('di');

『document.getElementById(‘取得するid’)』で『const 設定する定数名』にHTMLからidを取得します。

次にマウスホバーイベントを書いていきます。

//マウスホバー時
buttom.addEventListener('mouseover', () => {
  di.style.opacity = '1';
}, false);


//マウスが離れてる時
buttom.addEventListener('mouseleave', () => {
  di.style.opacity = '0';
}, false);

『addEventListener』の『mouseover』イベントで、マウスがホバーした時にどのような変化が起きるかを設定しています。

簡単に言うと、『addEventListener』が「イベントの会場」、『mouseover』が「イベントの内容」になります。

そしてその中に『変化する定数.style(CSSを付与).opacity=’1′(設定するCSS)』で「イベントが開催された結果」を設定します。
例えがわかりにくかったらすみません…。

上記コードにも書いてあるように、上がマウスホバーした時に0だったopacityを1にして表示させるイベント、下がマウスが離れた時に再びopacityを0にして消すイベントです。

まとめ

まとめとは書きましたが、特にまとめることはありません。
プログラミングはおもしろい！！

今後もプログラミング記事を投稿していきますのでお役に立てれば幸いです。

ちきんまさBLOG