강사님 이렇게 화면 시작할때 나타나는 효과들 구현중인데..

[정중식]

https://beige.de/?c=mode&c=interior&c=kultur&c=reisen

위 페이지에서 요소들이 하나씩 딜레이되면서 나오는데요, 
저는 이런식으로 구현해봤습니다.

function init() {
  const fadeColumns = document.querySelectorAll('.fade-col');
  var num = 500;

  for (let i = 0; i < fadeColumns.length; i++) {
    fadeColumns[i].style.animationDelay = `${num}ms`;
    num += 75;
  }
}

init();

애니메이션은 scss에서

.fade-col {
  animation: fade-in 400ms ease-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

이렇게 했구요 

근데 저는 동작이 이렇습니다..
https://youtu.be/HKI-tdIzN9M

(여기 비디오가 안올라가서 유튜브에서 올렸습니다.)

https://beige.de/?c=mode&c=interior&c=kultur&c=reisen
여기 사이트와 똑같이하려면 어느부분을 더 손봐야할까요?

[codingapple]

페이지 로드시 이미지 숨겨놓고
애니메이션줄 때 이미지도 보여주는 코드도 추가합시다

[정중식]

강사님

.fade-img {
  opacity: 0;
}

이렇게 img에 클래스명을 하나 지어주고, css를 주고
js로 컨트롤해줬습니다.     img[i].style.opacity = '1';

js컨트롤 부분 (애니메이션 딜레이 넣는 부분에 넣어줌)

  const fadeColumns = document.querySelectorAll('.fade-col');
  const img = document.querySelectorAll('.fade-img');

  var num = 500;

  for (let i = 0; i < fadeColumns.length; i++) {
    img[i].style.opacity = '1';
    fadeColumns[i].style.animationDelay = `${num}ms`;
    num += 75;
  }

제가 위에 글에 올린 링크와 비슷하게 나오기는하는데

눈부시게 깜빡거리면서 나오는건 어떻게 할 수 없을까요?...

[정중식]

혹시 선생님이 보실까봐 깃허브 코드주소도 첨부하겠습니다..
https://github.com/jungsikjeong/exercise-book/tree/master/web02

[codingapple]

opacity말고 display none 줘봅시다

[글쓴이]

글