수원화성 홍보사이트

플러그인과 제이쿼리를 활용한 가로스크롤 웹사이트

수원화성에 대한 홍보와 관광지로의 수원을 알리는 홈페이지를 제작하였습니다.
새롭게 익힌 제이쿼리와 플러그인을 더욱 활용하여 좀 더 화려하고 인터랙티브 한
사이트를 만들고 싶어 도전하게 된 웹사이트입니다.

기존 사이트는 정보전달을 목적으로 움직임이 없는 정적인 홈페이지였습니다.
새롭게 디자인을 하면서 화려하지만 가독성이 높고 세련된 디자인으로 제작하였습니다.

• Chrome 브라우저 최적화
• .offsetTop을 이용한 가로스크롤 홈페이지
• 가로형태의 탭 메뉴구성
• 플러그인을 활용한 여러 작업의 편의성
• 마우스 오버:hover 시 이미지 변환 (forEach.();)를 통하여 반복문 활용
• jQuery를 이용한 스크롤 위치에 따라 움직이는 애니메이션 적용
• jQuery를 이용한 버튼 클릭 시 특정 위치로 이동하는 scrollTo( x, y ) 이벤트

• 코드는 틀린게 없는데 왜 Javascript가 실행이 안될까?

console을 확인 하였을 때 코드는 문제점이 없었음. 하지만 실행이 되지 않았다. Javascript 작성 시 헤더 안에 작성 할 경우 script src="" 중 src 앞에 defer를 작성을 해야 Dom이 불러오기 전에 스크립트를 가져와 실행 시켜주어 defer 작성 후 해결

• 세로는 많이 해봤는데.. 가로스크롤은 어떻게 만들지?

세로형태의 홈페이지는 해보았지만 가로형태의 스크롤은 처음 해보아 실행의 어려움을 겪음. Position: sticky와 offsetTop을 이용한 전체 콘텐츠의 transform = translateX( ) 를 통한 부드러운 가로스크롤 완성

• 세로형태의 transform : rotate(270deg)의 늪

뒤집어진 탭메뉴와 애니메이션을 디자인 하였지만 실질적 코드 구현에 매우 어려움을 겪음 rotate(270deg) 적용 시 width 값과 height 값이 달라져버림 Position의 left . top 값을 이용하여 맞추고 z-index를 통한 우선순위 부여하여 해결

• 여기 위치에선 애니메이션이 이렇게 움직이고...

마우스 스크롤에 따른 애니메이션을 부여 시 첫 사용하는 jQuery를 통하여 제작 if와 else문을 활용하여 마우스 휠 위치에 따른 애니메이션 부여