Knowledge TimeLine (5) Scroll in Animation

const items = document.querySelectorAll('#timeline li');

const isInViewport = el => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

const run = () =>
  items.forEach(item => {
    if (isInViewport(item)) {
      item.classList.add('show');
    }
  });

// Events
window.addEventListener('load', run);
window.addEventListener('resize', run);
window.addEventListener('scroll', run);

 

 

 

/* Boxes */
#timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 1rem;
  background: var(--secondary-color);
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

모든 div들이 사라졌다.

 

 

 

 

/* Right Side */
#timeline ul li:nth-child(odd) div {
  left: 40px;
  transform: translate(200px, 0);
}

/* Left Side */
#timeline ul li:nth-child(even) div {
  left: -434px;
  transform: translate(-200px, 0);
}

div들을 x축에서 밀어냈다.

 

 

 

/* Show Boxes */
#timeline ul li.show div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

li에 show class가 추가된 경우 div들이 나타나도록

 

 

 

 

#timeline ul li:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 25px;
  height: 25px;
  background: inherit;
  transform: translateX(-50%);
  border-radius: 50%;
  transition: background 0.5s ease-in-out;
}


#timeline ul li.show:after {
  background: var(--secondary-color);
}

dots도 흰 색으로 있다가

secondary color로 바뀌게