• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

애니메이션 질문드립니다.

20.11.25 19:07 작성 조회수 188

1

안녕하세요 강의 잘 듣고있습니다.

다른 분들 포트폴리오를 보다가 의문점이 생긴 부분이 있어서 질문드립니다.

강사님의 프로젝트를 보면 애니메이션이 처음 Section home에 애니메이션을 걸어놨는데 다른 분들의 포폴 홈페이지를 보니까

1. 섹션을 내리다가도 다시 그 섹션에 돌아가면 애니메이션이 재시작되고 이런 게 좀 있어서 상황에 따라 그게 더 돋보일 수도 있다는 생각이 들어서 그렇게 설정을 하는건 어렵나요?

2. 강사님 슬라이더 강의를 들은걸로 슬라이더 형태를 만들면 (Slick.js를 안 쓴 경우) 사용자가 마우스로 label을 클릭해서만 이동하게 되있던데 그 슬라이더를 slick처럼 시간에 따라 자동으로 지나가게는 못만드나요?

답변 1

답변을 작성해보세요.

1

1. CSS 애니메이션은 페이지가 로드 되면서 바로 실행됩니다. 그런데 실행을 대기 시키고 스크롤되서 화면에 보이면 애니메이션을 시작하라고 하는 제이쿼리 플러그인 사용해야 합니다. 보통 이런걸 Reveal Animation 이라고 합니다.
여러가지 있지만 wow.js가 가장 편한 것 같습니다.
구글에서 wow.js라고 검색하시며 오피셜 사이트가 나옵니다.
단, 지금 강의의 플러그인과 함께 사용할 수는 없습니다. 제가 해본 결과로는요.

https://wowjs.uk/

2. 인접선택자로 만드는 순수 CSS로는 자동 슬라이드는 어렵습니다. 그런거는 Slick 슬라이더와 같은 제이쿼리 플러그인을 사용하셔야 합니다. 사용자가 클릭해서 탭 이동을 해도 되는 경우에는 인접선택자로 만드는 순수 CSS로 만드시고, 만약 자동으로 탭이 이동하는 탭 메뉴를 만드시려면 제이쿼리 플러그인을 활용하셔양 합니다.