<main class="mainContent js-mainContent">
  <div class="sample01">
<div class="sample01">
    <div class="sample01__box js-sample01__box">
        <div class="sample01__image">
            <img src="http://placeimg.com/640/340/people/sepia">
        </div>
    </div>
    <div class="sample01__box js-sample01__box">
        <div class="sample01__image">
            <img src="http://placeimg.com/640/340/sepia">
        </div>
    </div>
    <div class="sample01__box js-sample01__box">
        <div class="sample01__image">
            <img src="http://lorempixel.com/640/340/fashion" />
        </div>
    </div>
    <div class="sample01__box js-sample01__box">
        <div class="sample01__image">
            <img src="http://lorempixel.com/640/340/people" />
        </div>
    </div>
    <div class="sample01__box js-sample01__box">
        <div class="sample01__image">
            <img src="http://lorempixel.com/640/340/abstract" />
        </div>
    </div>
</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; }

.sample01 { width: 100%; height: 3000px; position: relative; overflow: hidden; }

.sample01__box { position: absolute; left: 50%; transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82); opacity: 0; }

.sample01__box:nth-of-type(odd) { transform: translate(100px, 100px) skewX(10deg); }

.sample01__box:nth-of-type(even) { margin-left: -640px; transform: translate(-100px, 100px) skewX(-10deg); }

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

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

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

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

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

.sample01__box:nth-of-type(6) { top: 3000px; }

.sample01__box:nth-of-type(7) { top: 3500px; }

.sample01__box:nth-of-type(8) { top: 4000px; }

.sample01__box:nth-of-type(9) { top: 4500px; }

.sample01__box:nth-of-type(10) { top: 5000px; }

.sample01__box:nth-of-type(11) { top: 5500px; }

.sample01__box:nth-of-type(12) { top: 6000px; }

.sample01__box:nth-of-type(13) { top: 6500px; }

.sample01__box:nth-of-type(14) { top: 7000px; }

.sample01__box:nth-of-type(15) { top: 7500px; }

.sample01__box:nth-of-type(16) { top: 8000px; }

.sample01__box:nth-of-type(17) { top: 8500px; }

.sample01__box:nth-of-type(18) { top: 9000px; }

.sample01__box:nth-of-type(19) { top: 9500px; }

.sample01__box:nth-of-type(20) { top: 10000px; }

.sample01__box.is-active { opacity: 1; transform: translate(0px, 0px); }

.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 observer = new IntersectionObserver((changes) => {
  if(changes[0].isIntersecting){
    changes[0].target.classList.add('is-active');
  } else {
    changes[0].target.classList.remove('is-active');
  }
});

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