<main class="mainContent js-mainContent" data-num="2" data-page="sample02">
    <div class="sample02">
    <div class="sample02__box js-sample02__box sample02__box-red"></div>
    <div class="sample02__box js-sample02__box sample02__box-blue"></div>
    <div class="sample02__box js-sample02__box sample02__box-yellow"></div>
    <div class="sample02__box js-sample02__box sample02__box-green"></div>
    <div class="sample02__box js-sample02__box sample02__box-tomato"></div>
</div>
    <div class="globalSideLine">
    <span class="globalSideLine__line globalSideLine__line-250">250</span>
    <span class="globalSideLine__line globalSideLine__line-500">500</span>
    <span class="globalSideLine__line globalSideLine__line-750">750</span>
    <span class="globalSideLine__line globalSideLine__line-1000">1000</span>
    <span class="globalSideLine__line globalSideLine__line-1250">1250</span>
    <span class="globalSideLine__line globalSideLine__line-1500">1500</span>
    <span class="globalSideLine__line globalSideLine__line-1750">1750</span>
    <span class="globalSideLine__line globalSideLine__line-2000">2000</span>
    <span class="globalSideLine__line globalSideLine__line-2250">2250</span>
    <span class="globalSideLine__line globalSideLine__line-2500">2500</span>
    <span class="globalSideLine__line globalSideLine__line-2750">2750</span>
    <span class="globalSideLine__line globalSideLine__line-3000">3000</span>
</div>
</main>
.mainContent { text-align: center; position: fixed; width: 100%; height: 100vh; overflow: auto; }

.sample02 { width: 100%; height: 3000px; position: relative; }

.sample02__box { position: absolute; width: 50px; height: 250px; left: 50%; margin-left: -25px; transform: translateX(0px); transition: transform 1s; }

.sample02__box:nth-of-type(1) { top: 500px; }

.sample02__box:nth-of-type(1).is-active { transform: translateX(300px); }

.sample02__box:nth-of-type(2) { top: 1000px; }

.sample02__box:nth-of-type(2).is-active { transform: translateX(300px); }

.sample02__box:nth-of-type(3) { top: 1500px; }

.sample02__box:nth-of-type(3).is-active { transform: translateX(300px); }

.sample02__box:nth-of-type(4) { top: 2000px; }

.sample02__box:nth-of-type(4).is-active { transform: translateX(300px); }

.sample02__box:nth-of-type(5) { top: 2500px; }

.sample02__box:nth-of-type(5).is-active { transform: translateX(300px); }

.sample02__box-red { background-color: red; }

.sample02__box-blue { background-color: blue; }

.sample02__box-green { background-color: green; }

.sample02__box-yellow { background-color: yellow; }

.sample02__box-tomato { background-color: tomato; }

.globalSideLine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.globalSideLine__line { position: absolute; left: 0; height: 1px; width: 100%; }

.globalSideLine__line:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }

.globalSideLine__line-250 { top: 250px; }

.globalSideLine__line-500 { top: 500px; }

.globalSideLine__line-750 { top: 750px; }

.globalSideLine__line-1000 { top: 1000px; }

.globalSideLine__line-1250 { top: 1250px; }

.globalSideLine__line-1500 { top: 1500px; }

.globalSideLine__line-1750 { top: 1750px; }

.globalSideLine__line-2000 { top: 2000px; }

.globalSideLine__line-2250 { top: 2250px; }

.globalSideLine__line-2500 { top: 2500px; }

.globalSideLine__line-2750 { top: 2750px; }

.globalSideLine__line-3000 { top: 3000px; }
let target = document.querySelectorAll('.js-sample01__box');
let options: {
  root: root,
  threshold: [0,0.5,1]
}

let observer = new IntersectionObserver((changes) => {
  console.log(changes[0].intersectionRatio);
},options);

//対象となる要素が複数かどうかを判定
for(let i = 0; i < target.length; i++){
  observer.observe(target[i]);
}
View Compiled
Rerun