scrolltop을 이용해 애니메이션을 구현하는데 반복이 될까요? 채택완료

안녕하세요.

애니메이션이 css로 추가되어 있는 상태인가요?

저같은 경우에는 애니메이션도 자바스크립트를 이용해 코드를 작성했던지라

자바스크립트의 setInterval 함수를 이용해서 해결했었습니다.

이제 제가 해결했던 방법을 말씀드리겠습니다.

애니메이션이 있는 곳에 스크롤이 위치하였을 때

애니메이션을 작동하게 하고,

애니메이션이 보이지 않는 곳으로 스크롤이 나갔을 때 초기화 조건을 걸어주어

애니메이션을 실행되기 이전 상태로 돌리는 if문을 적습니다.

그런 다음에, 작성하신 코드를 감싸 새로운 함수로 정의하신다음

자바스크립트 내장함수인 setInterval() 함수를 이용합니다.

setInterval(기존코드를 감싼 함수(), 지연시간);

여기서 지연시간은 1초? 정도로 해주면 됩니다.

그러면 스크롤에 따라 작동하는 if문이 1초간격으로 계속 실행되게 됩니다.

1초간격으로 if문이 갱신되기 때문에

애니메이션 위치에 해당하는 스크롤위치를 벗어났을때 애니메이션이 작동되기 전

상태로 되돌려주는 조건을 적어놓는다면

반복적으로 실행되는 애니메이션을 만들수 있을겁니다.^^