선생님, 수업에는 나오지 않는 부분인데 궁금한게 있어서 질문드립니다.

Question

안녕하세요 선생님! 먼저 선생님 강의를 잘듣고있는 학생입니다. 기본CSS부터 FLEX 그리고 포트폴리오강의까지 너무나 잘듣고 있습니다.^^ 포트폴리오 강의에는 해당 내용이 없는것 같은데 제가 너무 궁금해서 질문드립니다. 요즘 웹페이지를 보면 흔하게 볼수 있더라구요. 페이지가 전환될때나 스크롤을 내리면서 컨텐츠가 보일때 페이드인 되면서 애니매이션이 작동하는 방식이요! 페이지가 전환될때도 페이드아웃되고요. 부드럽게 넘어가는게 고급스러운 느낌을 주더라구요 ^^; (그래서 저도 써보고 싶어서 이리저리 검색해봤는데 며칠째 원하는 답을 찾지못했습니다.ㅜㅜ 그렇게 간단하지 않은것 같더라구요. DOM의 실행순서와 자바스크립트의 연관성이 있어보이던데...) 어떤 코드를 입력해야 구현이 가능한걸까요? 도움주시면 너무 감사하겠습니다!! http://andneeds.co.kr/ (여기웹을 보시면 home에서 shop으로 넘어갈때 애니메이션이 발생합니다. 그리고 shop에서 아래로 스크롤을 하면 애니메이션이 또 발생합니다.)

코딩웍스(Coding Works) · Answer

지금 말씀하시는게 페이지 트랜지션(page transition)이라고 보통합니다. 페이지 트랜지션을 수동으로 페이지가 로드되면서 설정해 놓은 CSS 키프레임 애니메이션을 실행시킬 수도 있지만... 페이지 트랜지션 제이쿼리 플러그인 사용하시는게 효율적입니다. 구글에서 page transition jquery plugin 검색하시면 아래 결과과 나옵니다. 검색 결과 들어가시면 여러가지 페이지 트랜지션 플러그인이 나옵니다. Demo 보시고 가장 알맞는 것을 선택하시면 됩니다. 아주 간혹 제이쿼리 플러그인 들어가면서 전체 사이트에 알 수 없는 문제가 생길 수 있습니다. 그래서 이렇게 전체적으로 페이지에 영향을 주는 플러그인은 제작 초기에 넣는 것이 좋습니다. 제가 시간이 질문글 보고 급하게 검색해서 몇개 봤는데 아래 있는게 보여주신 예시 사이트처럼 고급스럽게 페이지 트랜지션이 되네요. Demo 눌러소 보시고 사용법 잘 따라해보세요. 위에서 말씀드렸지만 page transition jquery plugin은 정말 많습니다. 그렇기 때문에 기능과 효과가 다양하지만 어려운 것 보다는 '사용하기 편한 것'이 가장 좋은 플러그인입니다.