현재는 one-page carousel 라이브러리 적용을 다시 롤백한 상태이다. 모바일에서 터치 이슈가 발생했기 때문이다. 모바일 퍼스트 기법을 사용했어야 했는데, 당연히 되겠지라며 PC에서만 테스트했다가 취소하게 되었다. 향후에 페이지 퍼블리싱은 철저하게 모바일 퍼스트로 하려고 한다. 현재는 CSS scroll로 대체하였다. 여러 라이브러리들을 테스트 해봐도 적절한 라이브러리를 찾기가 어려워서 이것으로 만족하려고 한다. (fullpage.js는 만족스러웠으나, 유료다...)
포트폴리오 사이트에 페이지 전체 세로 캐러셀(one-page vertical carousel)을 추가하기 위해 시도를 해 보았다. 이전에 예제, 사례를 본 적이 여러 번 있어 어려울 거라 생각하지 못했다. 그 과정에 대한 글을 남겨 본다.
처음에는 CSS 만으로
처음에는 smooth scroll로 검색해서, js 없이 css만으로 처리했다.
- 장점: JS를 하나도 쓰지 않았다.
- 단점: 봤던 예제보다 부드럽지 않았고, 하나씩 움직이는 캐러셀 동작은 구현되지 완전하지 않았다.
그래서 다른 퍼블리싱 기법을 찾아 나섰다. 원하는 결과물은 이랬다.
- 한번에 하나씩 움직인다.
- 가로가 아닌 세로로 움직인다.
- 터치나 마우스로 스크롤이 자연스럽다.
- indicator가 있어 클릭하면 해당 페이지로 한번에 이동한다.
검색어 찾아 헤매기
캐러셀 말고 다르게 하고 싶다!
검색어를 떠올릴 수가 없었다. 캐러셀은 처음에는 내가 원하는 게 아니었다. 기존의 smooth scroll과 캐러셀은 차이가 있다. 캐러셀은 페이지 전체의 스크롤 관점에서 보면, 문서 위에서 고정된 위치의 컨테이너가 그 안의 아이템들을 담고 있다. 반면 smooth scroll은 문서 위에 아이템들이 나열되어 있어, 아이템의 개수와 길이 만큼 문서 길이가 늘어나는 차이가 있다. 또한 캐러셀로 검색한 결과는 거의 가로 형태였고, 세로 형태 예제는 많지 않았다.
transform translate
touch와 scroll 이벤트에 따라서 각 섹션이 넘어가도록 JS로 구현한 사이트를 봤다. indicator를 만들어 두고 해당 페이지 이동도 구현되어 있었다. (사이트: 현대자동차) 원하는 결과물이라고 생각했지만, touch와 scroll 이벤트를 직접 구현하기가 싫어서, 라이브러리를 찾아보기로 했다.
검색어가 뭐지?
맞는 검색어를 찾는 데 1시간은 걸린 것 같다. 한참 헤매다가 이 페이지에서 다 찾은 것 같다. page slider나, one-page scrolling, one-page carousel로 검색하면 되는 거 같다.
또 이 페이지에서 많은 라이브러리들을 소개해줘서 한번씩 시도해봤다. 하지만 정작 여기 있는 라이브러리를 쓰진 못했다. 터치 스크롤이 지원이 안 되면 사용할 수 없었다.
page-slider-js
라이브러리 fullpage, swiperjs, wholepage-slider 각각 시도해보다가, page-slider-js를 골랐다. 다른 라이브러리보다 적용하기 더 쉬웠다.
라이브러리 사용 시 주의할 점으로 container 크기를 height 100%에 맞춰주는 것이 좋다. 또한 item 크기는 height 100%여야 한다. 코드 구현 상 item이 100%라고 가정하고 이동시키기 때문에, 84vh item을 쓰던 기존 작업물에 적용하니까 스크롤 할 때마다 16vh씩 위로 밀렸다.
가장 시각적으로 보기 좋았던 건 sweet-scroll이었다. 그래서 여기서 쓰이는 기본 파라미터를 적용하고 싶었다. Duration이 1000ms였으므로 조금 빠른 834ms를 적용하고, JS에서 스크롤 후딜레이를 기본 400ms에서 0으로 변경했다.
:root {
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}
.slides {
position: fixed;
height: 100%;
width: 100%;
transition: transform 834ms var(--ease-out-quint);
}// page change animation is done
detectChangeEnd() && document.querySelector(sliderElement).addEventListener(detectChangeEnd(), function () {
if (isChanging) {
setTimeout(function() {
isChanging = false;
window.location.hash = document.querySelector('[data-slider-index="' + currentSlide + '"]').id;
}, 0);
}
});sweet-scroll은 easing function을 easeOutQuint를 사용하고 있었는데, CSS 기본에는 없는 이름이라서 찾아 봤다. 이 사이트를 보면 여러 함수를 소개해 놓았다. 하여튼 CSS에 내장되어 있지 않지만, flutter에서도 쓰이는 것 같고, 유명하니까 Bezier로 구현된 게 있을 거라 생각하고 검색했다. 이 사이트에서 찾아서 코드에 적용했다.
결과
수정한 코드는 여기에서 볼 수 있다.
