scrolltop을 이용해 애니메이션을 구현하는데 반복이 될까요?
본문
scrolltop으로 일정 스크를 되면 animate.css를 이용해 애니메이션 클래스를 추가시켜 애니메이션이 작동되게끔 하는데
다시 스크롤이 위로 올라갔다가 내려가면 애니메이션이 반복되게끔 하고 싶습니다.
어떻게 하면 좋을까요?
관련 자료라도 찾아보고 싶습니다.
답변 1
안녕하세요.
애니메이션이 css로 추가되어 있는 상태인가요?
저같은 경우에는 애니메이션도 자바스크립트를 이용해 코드를 작성했던지라
자바스크립트의 setInterval 함수를 이용해서 해결했었습니다.
이제 제가 해결했던 방법을 말씀드리겠습니다.
애니메이션이 있는 곳에 스크롤이 위치하였을 때
애니메이션을 작동하게 하고,
애니메이션이 보이지 않는 곳으로 스크롤이 나갔을 때 초기화 조건을 걸어주어
애니메이션을 실행되기 이전 상태로 돌리는 if문을 적습니다.
그런 다음에, 작성하신 코드를 감싸 새로운 함수로 정의하신다음
자바스크립트 내장함수인 setInterval() 함수를 이용합니다.
setInterval(기존코드를 감싼 함수(), 지연시간);
여기서 지연시간은 1초? 정도로 해주면 됩니다.
그러면 스크롤에 따라 작동하는 if문이 1초간격으로 계속 실행되게 됩니다.
1초간격으로 if문이 갱신되기 때문에
애니메이션 위치에 해당하는 스크롤위치를 벗어났을때 애니메이션이 작동되기 전
상태로 되돌려주는 조건을 적어놓는다면
반복적으로 실행되는 애니메이션을 만들수 있을겁니다.^^
답변을 작성하시기 전에 로그인 해주세요.