スクロール量に応じて背景画像を切り替えたい

画面左側に画像を固定し、画面右側のスクロール量に応じて画像を切り替えたいです。
しかし、画像が切り替わるタイミングで白の背景色が出現してしまい、あまり綺麗とは言えません。

参考サイトのように、背景色を見せずに画像を切り替える方法をご教示いただきたいです。
よろしくお願いいたします。

参考サイト：https://sub-cocoiro.ssl-lolipop.jp/neko/archives/1415

html
1<section class="company is-pc">
2  <div class="company__left">
3    <div class="company__picture company__picture1 is-active"></div>
4    <div class="company__picture company__picture2"></div>
5    <div class="company__picture company__picture3"></div>
6    <div class="company__picture company__picture4"></div>
7    <div class="company__picture company__picture5"></div>
8    <div class="company__picture company__picture6"></div>
9    <div class="company__picture company__picture7"></div>
10    <div class="company__picture company__picture8"></div>
11  </div>
12  <div class="company__right">
13    <div class="mt-1"></div>
14    <div class="area"></div>
15    <div class="area2"></div>
16    <div class="area3"></div>
17    <div class="area4"></div>
18    <div class="area5"></div>
19    <div class="area6"></div>
20    <div class="area7"></div>
21    <div class="area8"></div>
22  </div>
23</section>

css
1.company {
2  .company__left {
3    margin-top: -100vh;
4    width: 50vw;
5    height: 100vh;
6    position: sticky;
7    top: 0;
8    left: 0;
9
10    .company__picture {
11      height: 0;
12      background: url(../img/company/company.jpg) center center / cover no-repeat;
13      opacity: 0;
14      transition: opacity 0.4s;
15
16      &.is-active {
17        height: 100%;
18        opacity: 1;
19      }
20    }
21
22    .company__picture1 {
23      margin-top: -1px;
24    }
25  }
26
27  .company__right {
28    margin-left: auto;
29    width: 50vw;
30
31    .mt-1 {
32      margin-top: -1px;
33    }
34
35    .area {
36      height: 100vw;
37    }
38  }
39}

js
1jQuery(function () {
2  jQuery(window).scroll(function () {
3    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
4    let areaTop = jQuery(".area").offset().top; // 対象エリアの上部の位置
5    let areaBottom = areaTop + jQuery(".area").innerHeight(); // 対象エリアの下部の位置
6
7    if (scrollTop > areaTop && scrollTop < areaBottom) {
8      jQuery(".company .company__picture1").addClass('is-active'); // スクロールが対象エリアに入った場合
9    } else {
10      jQuery(".company .company__picture1").removeClass('is-active'); // スクロールが対象エリアから出ている場合
11    }
12  });
13});
14
15jQuery(function () {
16  jQuery(window).scroll(function () {
17    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
18    let areaTop = jQuery(".area2").offset().top; // 対象エリアの上部の位置
19    let areaBottom = areaTop + jQuery(".area2").innerHeight(); // 対象エリアの下部の位置
20
21    if (scrollTop > areaTop && scrollTop < areaBottom) {
22      jQuery(".company .company__picture2").addClass('is-active'); // スクロールが対象エリアに入った場合
23    } else {
24      jQuery(".company .company__picture2").removeClass('is-active'); // スクロールが対象エリアから出ている場合
25    }
26  });
27});
28
29jQuery(function () {
30  jQuery(window).scroll(function () {
31    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
32    let areaTop = jQuery(".area3").offset().top; // 対象エリアの上部の位置
33    let areaBottom = areaTop + jQuery(".area3").innerHeight(); // 対象エリアの下部の位置
34
35    if (scrollTop > areaTop && scrollTop < areaBottom) {
36      jQuery(".company .company__picture3").addClass('is-active'); // スクロールが対象エリアに入った場合
37    } else {
38      jQuery(".company .company__picture3").removeClass('is-active'); // スクロールが対象エリアから出ている場合
39    }
40  });
41});
42
43jQuery(function () {
44  jQuery(window).scroll(function () {
45    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
46    let areaTop = jQuery(".area4").offset().top; // 対象エリアの上部の位置
47    let areaBottom = areaTop + jQuery(".area4").innerHeight(); // 対象エリアの下部の位置
48
49    if (scrollTop > areaTop && scrollTop < areaBottom) {
50      jQuery(".company .company__picture4").addClass('is-active'); // スクロールが対象エリアに入った場合
51    } else {
52      jQuery(".company .company__picture4").removeClass('is-active'); // スクロールが対象エリアから出ている場合
53    }
54  });
55});
56
57jQuery(function () {
58  jQuery(window).scroll(function () {
59    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
60    let areaTop = jQuery(".area5").offset().top; // 対象エリアの上部の位置
61    let areaBottom = areaTop + jQuery(".area5").innerHeight(); // 対象エリアの下部の位置
62
63    if (scrollTop > areaTop && scrollTop < areaBottom) {
64      jQuery(".company .company__picture5").addClass('is-active'); // スクロールが対象エリアに入った場合
65    } else {
66      jQuery(".company .company__picture5").removeClass('is-active'); // スクロールが対象エリアから出ている場合
67    }
68  });
69});
70
71jQuery(function () {
72  jQuery(window).scroll(function () {
73    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
74    let areaTop = jQuery(".area6").offset().top; // 対象エリアの上部の位置
75    let areaBottom = areaTop + jQuery(".area6").innerHeight(); // 対象エリアの下部の位置
76
77    if (scrollTop > areaTop && scrollTop < areaBottom) {
78      jQuery(".company .company__picture6").addClass('is-active'); // スクロールが対象エリアに入った場合
79    } else {
80      jQuery(".company .company__picture6").removeClass('is-active'); // スクロールが対象エリアから出ている場合
81    }
82  });
83});
84
85jQuery(function () {
86  jQuery(window).scroll(function () {
87    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
88    let areaTop = jQuery(".area7").offset().top; // 対象エリアの上部の位置
89    let areaBottom = areaTop + jQuery(".area7").innerHeight(); // 対象エリアの下部の位置
90
91    if (scrollTop > areaTop && scrollTop < areaBottom) {
92      jQuery(".company .company__picture7").addClass('is-active'); // スクロールが対象エリアに入った場合
93    } else {
94      jQuery(".company .company__picture7").removeClass('is-active'); // スクロールが対象エリアから出ている場合
95    }
96  });
97});
98
99jQuery(function () {
100  jQuery(window).scroll(function () {
101    let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
102    let areaTop = jQuery(".area8").offset().top; // 対象エリアの上部の位置
103    let areaBottom = areaTop + jQuery(".area8").innerHeight(); // 対象エリアの下部の位置
104
105    if (scrollTop > areaTop && scrollTop < areaBottom) {
106      jQuery(".company .company__picture8").addClass('is-active'); // スクロールが対象エリアに入った場合
107    } else {
108      jQuery(".company .company__picture8").removeClass('is-active'); // スクロールが対象エリアから出ている場合
109    }
110  });
111});