Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hide8888

【CSS】【JavaScript】フェードイン・フェードアウト

Posted at

目的

画像や文字が徐々に出現したり消えたりする、フェードイン・フェードアウト機能をCSSとJavaScriptでなるべく簡単に実装します。

実装

ghorst.gif

index.html
<div class="img">
  <img id="ghorst" class="ghorst" src="obake.png">
</div>

<button id="hide-btn">いないいな〜い</button>
<button id="appear-btn">ばぁ！</button>
stylesheet.css
/* アニメーションの設定 */
.ghorst {
  transition: opacity 3s; /* opacity要素(不透明度)の変更を3秒間かけて行う */
}
script.js
// 各要素を取得
const ghorst = document.getElementById('ghorst');
const hideBtn = document.getElementById('hide-btn');
const appearBtn = document.getElementById('appear-btn');

// 画像を透明にする処理
const ghorstHide = () => {
  ghorst.style.opacity = 0; // 画像要素のopacityプロパティの値を0(透明)にする
};

// 画像を不透明にする処理
const ghorstAppear = () => {
  ghorst.style.opacity = 1; // 画像要素のopacityプロパティの値を1(不透明)にする
};

// 各ボタン要素がクリックされた時の処理を指定
hideBtn.addEventListener('click', ghorstHide);
appearBtn.addEventListener('click', ghorstAppear);

使用　プロパティ・メソッド

CSSプロパティ　 意味 参考サイト
opacity 要素の不透明度を設定 MDN Web Docs
transition 要素のアニメーションを定義する MDN Web Docs
JavaScriptプロパティ・メソッド 意味 参考サイト
getElementById() HTMLのidから要素を取得する MDN Web Docs
style 要素のスタイルを変更する MDN Web Docs
addEventListener() 要素にイベントが起こったときに実行される処理を指定 MDN Web Docs

解説

CSSプロパティのopacityで不透明度が指定できるため、transitionでopacityの値が変更されたときの変化アニメーションを定義します。
JavaScriptでopacityの値を変更することで、transitionで定義されたアニメーションが実行されます。

opacity

要素の不透明度を指定します。

0〜1の間で指定し、
0: 透明
1: 不透明
になっています。例えば、opacity: 0.5;と指定すると、その要素は半透明になります。

transition

要素の値が変更された際の、アニメーションの動きを定義します。transitonは、以下のの4つのプロパティを一括で指定できます(半角区切り)。
複数指定する場合はカンマ,で区切ります。
値の変更方法は、JavaScriptのclassListやstyle、CSSの:hoverなど。

プロパティ 意味 参考サイト
transition-property 効果を適用するプロパティの指定
(propaty: プロパティ)		 MDN Web Docs
transition-duration アニメーションが完了するまでの時間を指定
(duration: 持続・継続・間隔）		 MDN Web Docs
transition-timing-function 変化の速度とタイミングを指定
(timing function: タイミング機能・時間調整機能)		 MDN Web Docs
transition-delay アニメーションが始まるまでの時間を指定
(delay: 遅延・先延ばし)		 MDN Web Docs 
.class {
  transition: 対象プロパティ 完了までの時間 変化の速度 開始までの時間;
}

/* 複数指定 */
.class {
  transition:
    プロパティA 完了時間 変化速度 開始時間,
    プロパティB 完了時間 変化速度 開始時間,
    プロパティC 完了時間 変化速度 開始時間;
}

transition-property

変化させるCSSのプロパティを指定します。
フェードイン・フェードアウトでは、opacityを指定しています。
指定をallとすることで、全てのプロパティを同時に指定することもできます。

transition-duration

アニメーションが完了するまでの時間の指定ができます。
s: 秒
ms: ミリ秒
の二つで指定できます。
今回は3sとすることで、3秒でフェードイン・フェードアウトをしています。

transition-timing-function

アニメーションの変化の速度を指定できます。

値 意味
ease 滑らか(初期値)
linear 一定速度
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まり、ゆっくり終わる
cubic-bezier 3次ベジェ曲線を数値で指定(x1, x2, y1, y2)
ease

car-ease.gif

.car {
  transition: 4s ease; /* 4秒で滑らかに */
}
linear

car-linear.gif

.car {
  transition: 4s linear; /* 4秒間一定速度で */
}
ease-in

car-ease-in.gif

.car {
  transition: 4s ease-in; /* 4秒でゆっくり始まる */
}
ease-out

car-ease-out.gif

.car {
  transition: 4s ease-out; /* 4秒でゆっくり終わる */
}
ease-in-out

car-ease-in-out.gif

.car {
  transition: 4s ease-in-out; /* 4秒でゆっくり始まりゆっくり終わる */
}
cubic-bezier

car-cubic-bezier.gif

.car {
  transition: 4s cubic-bezier(0, 0.76, 1, 0.23); /* 4秒で真ん中ゆっくり */
}

参考サイト: Cubic Bezier(ジェネレータ)

transition-delay

アニメーションの開始時間を指定できます。
s: 秒
ms: ミリ秒
の二つで指定できます。

car-delay.gif

.car {
  transition: 4s 3s; /* スタートを押してから3秒後に4秒間で移動 */
}

style

JavaScriptでCSSプロパティの値を取得・変更する際に使用します。

今回は、

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

で、画像の要素を取得し、

ghorst.style.opacity = 0;

とすることで、　opacityの値を変更しています。
この変更にtransitionプロパティが反応し、アニメーションが実行されます。

注意点

簡単にフェードイン・フェードアウトを実装できるtransitionですが、比較的新しい技術のため、古いブラウザ(IE9など)では動作しません。
対応ブラウザはDOM Web Docs(transition)や、Can I use (transition?)などを参照してください。

プラス

さらに動きをつけてみました。

ghorst2.gif

<!-- HTMLは変更ありません -->
<div class="img">
  <img id="ghorst" class="ghorst" src="obake.png">
</div>

<button id="hide-btn">いないいな〜い</button>
<button id="appear-btn">ばぁ！</button>

/* レイアウトが崩れないように画像の場所取り */
.img {
  width: 300px;
  height: 320px;
}

/* 画像に高さ・幅を指定 */
.ghorst {
  width: 300px;
  height: 320px;
  transition: all 3s; /* width, height, opacityをまとめて指定するため、プロパティを　all　に変更 */
}

/* フェードアウトするときの値 */
.hide {
  width: 0;
  height: 0;
  opacity: 0;
}

/* フェードインするときの値 */
.appear {
  width: 300px;
  height: 320px;
  opacity: 1;
}

const ghorst = document.getElementById('ghorst');
const hideBtn = document.getElementById('hide-btn');
const appear = document.getElementById('appear-btn');

// クラスを付け替えることで、まとめて値を変更
const ghorstHide = () => {
  ghorst.classList.remove('appear');
  ghorst.classList.add('hide');
};

const ghorstAppear = () => {
  ghorst.classList.remove('hide');
  ghorst.classList.add('appear');
};

hideBtn.addEventListener('click', ghorstHide);
appear.addEventListener('click', ghorstAppear);

classList

要素のクラスを操作することができるプロパティです。

remove()メソッドを使用することで、クラスを削除し、add()メソッドでクラスを追加しています。

MDN Web Docs



ご覧いただき、ありがとうございました。

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?