질문있습니다.

Question

선생님 안녕하세요! 강의를 듣다가 award 부분에 스크롤이 도달했을 때 opacity : 0 이었다가opacity : 1로 스르륵 나타나게 하고싶은데 js를 모르겠어요 ㅠㅠ 혹시 알려주실 수 있으실까요?

Answer

지금 말씀하시는걸 일반적으로 Scroll Reveal Animation이라고 합니다.

CSS 애니메이션은 페이지가 로드 되면서 실행되는데 이걸 스크롤 되기 전까지 곧 화면에 나오기 전까지 실행을 하지 않고 대기하는 겁니다. 그리고 스크롤하면 하나씩 애니메이션이 되는 것을 말합니다.

대표적으로 wow.js라는 제이쿼리 플러그인이 있습니다.

아래 사이트가 공식사이트입니다. 사용법은 어렵지 않으니 한번 연습해보세요.

하지만 스크롤 이펙트가 있는 현재 플러그인과 함께 사용할 수는 없는 것으로 알고 있습니다.