📌FullPage
홈페이지를 제작하면서 fullPage로 페이지 전환되는 페이지를 만들면서 사용할만한 라이브러리가 있는지 찾아봤음.
FullPage.js라는 라이브러리가 있지만, 이번에 업데이트 되면서 유료로 바뀌었더라..
그래서 js로 구현해 보기로 함
기능소개
화면 단위로 스크롤되는 동작,
버튼 클릭하면 해당 순서의 화면으로 이동하는 기능 추가
🔖화면단위 스크롤
- 한페이지로 스크롤 될 단위를 만들어줌
- 스크롤바를 이용한 이동을 막음
- 각 div의 높이를 사용자의 viewport높이로 설정(vh)
- 각 화면의 구분을 위해 배경색을 다르게 설정함
-
scrollTo ?
:: javaScript에서 사용하는 메서드, 웹페이지를 특정 위치로 스크롤할 때 사용.
웹페이지의 수직 또는 수평 스크롤 위치를 제어할수 있고, 스크롤 효과를 적용할 수도 잇음 -
deltaY ?
:: 스크롤 이벤트 당 절대적 픽셀의 이동값을 나타냄, 스크롤을 내릴땐 (화면이 올라갈땐) 음수, 스크롤을 올릴땐 ( 화면이 내려갈땐) 양수로 표현
🎆결과
한 화면 단위(div)로 스크롤 이동.
div요소를 추가하더라도 js코드는 손댈 필요 없음
하지만 현재 스크롤 되어 있는 곳이 어느 페이지인지, 내가 가고 싶은 페이지는 5페이지, 현재는 2페이지면 스크롤을 일일이 해줘야 하는 불편함이 있음
📌클릭하면 원하는 화면으로 이동
navgation을 추가로 생성해줌
- 네비게이션 버튼을 변수에 전부 담아줌
- forEach문으로 네비게이션 버튼을 돌아가며 이벤트를 등록시켜줌
- 네비케이션 버튼 색상을 변경하는 함수를 따로 만들어주고 클릭 이벤트와 스크롤이벤트 둘다 적용시켜줌
🎆결과
스크롤시 어떤 페이지를 보여주고 잇는지, 내가 가고 싶은 페이지로 한번에 이동 가능한 네비게이션이 생성됨!
Hi!