1PAGE 자동 스크롤이 지원되는 플러그인을 업무중에 사용하게 되었습니다.


사실 버튼을 클릭하여 스크롤을 시키는 동작은 일반 jQuery로도 animate 함수를 이용하고, css를 잘 조작하면 별도의 플러그인 없이도 구현할 수 있습니다. 다음카카오의 카카오톡 옐로아이디 사이트도 별도의 플러그인을 사용하지 않고 이런 방법으로 만들어진 것을 확인할 수 있습니다.


하지만 여기서 문제는 버튼을 클릭하지 않을 때, 마우스 가운데에 있는 휠을 조작하여 스크롤을 할 상황입니다. 이 상황에서 플러그인 없이 무턱대고 원하는 위치에 화면을 가져다 놓는 것은 쉽지만은 않습니다.


이 상황에서 사용할 수 있는 플러그인은, 제가 언급하는 2개 이외에도 찾아보면 또 있을 것 같습니다만, 일단 유명해 보이는, 그리고 회사에서 업무적으로 적용을 고려해 보았던 두 플러그인만을 소개시켜 드리겠습니다.






1. Fullpage.js



http://www.alvarotrigo.com/fullPage/#firstPage


Fullpage.js의 장점은 수직, 수평 스크롤을 모두 지원한다는 것입니다.


물론 수평 스크롤을 자체적으로 지원하지 않더라도, 다른 슬라이드 계열 플러그인을 적당히 변형시켜 끼워 넣음으로써 수평 스크롤을 구현하는 것 또한 가능합니다. 하지만 플러그인에서 자체적으로 제공한다면 상당히 편리하겠죠.


또한 수직 스크롤을 컨트롤하는 버튼을 내마음대로 지정해서 쓸 수 있다는 것 또한 장점입니다.


하지만 이 플러그인에는 치명적인 단점이 있습니다.


수직 스크롤을 지원하는 페이지를 최대 4PAGE로 지정해야 한다는 것입니다.


수직 스크롤 페이지가 5PAGE 이상이 되면 어떤 기능을 넣던간에 CSS가 먹히지 않고 빈 페이지로 나타나게 되며, 그나마 있던 기존 페이지들마저 엉키게 됩니다.


구글링을 해본 결과 이 것은 플러그인 자체적인 기능제약으로써, 딱히 해결할 수 있는 방법은 없는 것으로 보이더군요.


회사에서 원하는 형태는 수직 스크롤 페이지가 6~8PAGE가 지원되는 것이었으므로, 이 플러그인을 사용할 수 없었습니다.






2. One Page Scroll



http://www.thepetedesign.com/demos/onepage_scroll_demo.html


이 플러그인은 수평 스크롤을 지원하지 않으며, 수직 스크롤을 컨트롤하는 버튼이 자동으로 삽입되어 마음대로 조절할 수 없다는 것이 단점이지만(플러그인 구조를 바꾸는 게 아니라면 css로만 조절이 가능합니다. 그러니까 제약이 있다고 봐야죠.) 수직 스크롤을 지원하는 페이지 수의 제약이 없다는 하나의 엄청난 장점 때문에, 현재 회사 프로젝트를 위해 선택된 플러그인이 되겠습니다.


이번 회사 프로젝트에서 수평 스크롤은 필요없는 기능이었기 때문에 어차피 고려대상이 아니었고, 수직 스크롤을 컨트롤하는 버튼이 화려한 구조나 인터랙션이 이루어질 필요는 없었기 때문에, 이정도 수준의 플러그인이 적당하다고 판단했습니다.


다만 이 플러그인도 모든 수직 자동 스크롤 제작 상황에서 쓰일 수 있는 플러그인이 아니므로, 나중을 위해서라도 대안을 찾아보는 것은 필요해 보입니다.






사실 2번 플러그인은 실무에서 jQuery를 사용할 때 특정 상황(특정 logic이 들어간 코드)에서 충돌하기 때문에 주의사항이 있습니다. 그 부분은 나중에 설명드리겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 수평선 2015.08.12 10:36 신고  댓글주소  수정/삭제  댓글쓰기

    화영님 fullPage.js 버전 뭘로 하셨나요?
    저는 5페이지이상도 잘되던데요..
    제가 사용하는 버전은 2.6.8 입니다.
    혹시 테스트방식이 다를수도 있겠네요..

  2. Brownle 2015.08.13 06:33 신고  댓글주소  수정/삭제  댓글쓰기

    화영님 혹시 마크쿼리 반응형 스킨의
    본문여백을 화영님처럼,
    글씨들이 가운데쪽으로 몰려서 보이도록 설정하는 방법을 아시나요?

    제 스킨은 가장자리부터 글자들이 시작되어서
    가독성이 떨어지는 것 같아요 ㅠ

    • 책덕후 화영 2015.08.13 09:55 신고  댓글주소  수정/삭제

      .typography 속성을 찾은 다음에, padding:40px; 속성을 주시면 될겁니다. 제 스킨은 padding:30px 80px; 로 설정되어 있는데, 마크쿼리 스킨은 40px 정도 주는 것이 모양이 더 이쁜 것 같습니다.

티스토리 툴바