javascriptによる画像切り替え時のアニメーション

Question

実現したいこと

HTMLとCSSで画像を2枚重ね、javascriptでmouseover時に1枚目の画像を非表示、mouseout時に1枚目の画像を再度表示という処理をするとき、画像を(見た目上)徐々に変化させたいです。

発生している問題・分からないこと

カーソルを画像に重ねたときにゆるやかに画像を切り替えたいのですがやり方がわかりません。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

調べ方が悪いのか、あまりわかりませんでした。

補足

特になし

Answer 1

概要

不透明度はCSSのopacityを使い、時間経過はtransitionを使うとうまくいくのではないでしょうか？

〇opacity
https://developer.mozilla.org/ja/docs/Web/CSS/opacity
〇transition
https://developer.mozilla.org/ja/docs/Web/CSS/transition

解説

例えばHTMLで画像を二枚配置し、.image-top のように上の画像にクラス名をつけておきます。

<div class="image-container">
  <img src="https://picsum.photos/id/21/200/300" class="image image-top">
  <img src="https://picsum.photos/id/22/200/300" class="image image-bottom">
</div>

CSS で .image-top に opacity: 1; を指定します。つまり不透明度1（透明度0）の初期状態です。

.image-container {
  position: relative;
  width: 200px; 
  height: 300px;
  overflow: hidden;
}

.image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out; /* 徐々に変化 */
}

.image-top {
  z-index: 2;
  opacity: 1; /* 不透明度1（透明度0）の初期状態 */
}

.image-bottom {
  z-index: 1;
}

JavaScriptで .image-top の opacity を 0 にすると、上の画像を非表示にできます。
そしてこの際、CSSで transition を 0.5s としているので、0.5秒かけて徐々に非表示にしてくれます。

const imageContainer = document.querySelector('.image-container');
const topImage = document.querySelector('.image-top');

imageContainer.addEventListener('mouseover', () => {
  topImage.style.opacity = 0; // 上の画像を非表示
});

imageContainer.addEventListener('mouseout', () => {
  topImage.style.opacity = 1; // 上の画像を再表示
});

実装サンプル

上記のコードを実装するとこうなります。
https://jsfiddle.net/k9vca8uj/

Comments

[hgioueao]

なるほど！
transitionで動きをつければ良いのですね。
試してみたらできました、ありがとうございます！

Answer 2

スタイルシートでよいような気がします

<style>
.wrap{
position:relative;
}
.wrap img{
position:absolute;;
}
.wrap :nth-child(1 of img){
transition: opacity 1s;
z-index:2;
}
.wrap :nth-child(1 of img):hover{
opacity:0;
}
</style>
<div class="wrap">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2">
</div>

Comments

[hgioueao]

ありがとうございます、参考になります！