【javascript】ページのスクロールで画像を入れ替えたい。

ポートフォリオサイトの制作中に使った画像の入れ替えについて
ざっくりまとめたのでご紹介。
( 今回はhamlではなくhtmlそのまま使用しています)

やりたい事

以下のように、スクロール用によって画像をじんわり入れ替えたい。

1. 使う画像を準備する

今回は二枚の画像を入れ替えます。
クラスとかwidthはなんでも構いません。

sample.html

~ 省略 ~

<div class="image-man">  ⬅️写真二枚いれる箱
  <img src="img/javascript.png"  class="js-image" width= 39%>
  <img src="img/github.png"  class="git-image" width= 39%>
</div>

~ 省略 ~

2. CSSを準備する

2枚目のGithubの方は下に重ねて、透過度を０にしておきます。

sample.css

.js-image {
  margin-left: 395px;
  margin-top: 140px;
  z-index: 1;
}
.git-image {
  z-index: 0;
  position: absolute;
    top: 140px;
    left: 395px;
  opacity: 0;
}

3. JSで画像の入れ替えの準備をする

今回は、少しでも下にスクロールしたら2枚目の画像に変えたいので
１０pxで発火するようにしています。
じんわり透過率を変えたかったので（transition）を設定しています。

sample.js

window.onscroll = function(){  
var scrollTop = window.pageYOffset ;  //スクロール量を代入する

if (scrollTop == 0 ) {   //最上部に戻ってきた時
$(".js-image").css('opacity', '1')
  $('.js-image').css('transition', '0.5s')

  $(".git-image").css('opacity', '0')
  $('.git-image').css('transition', '0.5s')
}
if (scrollTop > 10 ) {   //１０pxスクロールした時
  $(".js-image").css('opacity', '0')
  $('.js-image').css('transition', '0.5s')

  $(".git-image").css('opacity', '1')
  $('.git-image').css('transition', '0.5s')
}
}

---

以上で終了です。
ご覧いただきありがとうございました。