원페이지 스크롤 형태의 사이트를 만들때 사용하는 라이브러리 '스크롤리파이'.
틀이 있는 라이브러리도 어떤식으로 커스텀해서 사용하느냐에 따라 사이트 퀄리티가 달라진다.
이번 프로젝트를 진행하면서 처음 써본 스크롤리파이 라이브러리는,
생각보다는 정보 찾기가 쉽지 않았다.. 뚝딱뚝딱 (검색을 잘 못하는 날 탓해야 할 수도 OTL)
나와 같이 뚝딱거리고 있을 디블리셔들을 위해
누군가에게는 나의 메모가 유용하게 쓰이기를 바라며,
프로젝트 종료를 앞둔 시점에서 최종적으로 내가 찾아낸 스크롤리파이에 대한 정보들을 끄적여본다.
[목차]
01. 스크롤리파이 적용하기. (기본형태)
02. 스크롤리파이 반응형으로 제한하기.
03. 원페이지스크롤을 구현하지 않을 일반 페이지 섞기.
04. 섹션별 헤더 색상 변경하기.
05. footer에 닿았을 때 헤더 숨기기. (02 응용)
01. 스크롤리파이 적용하기 (기본 형태)
원페이지스크롤의 아주 기본형태이다.
02~05번의 형태를 취하기 위해서는 아래와 같은 기본 형태를 먼저 셋팅하고, 원하는 용도에 맞게 커스텀 하며 스크립트 및 기타 소스들을 추가해나가야 한다.
* pagenation 부분은, html 소스를 만질 필요 없이 css로만 입맛에 맞게 수정하면 된다.
* 헤더와 푸터를 사용안하려면, html 소스에서 삭제하면 된다. (css들도 필요 없으니, 자유롭게 삭제)
See the Pen 스크롤리파이 페이지 by 노미선 (@iktqscdy-the-selector) on CodePen.
02. 스크롤리파이 반응형으로 제한하기
스크롤리파이 라이브러리는 웹과 모바일 모두 반응형으로 원페이지스크롤링이 자동 반영된다.
그러나 내가 참고했던 레퍼런스들을 토대로 살펴보면, 요즘은 웹에서는 원페이지스크롤을 쓰지만 모바일에서는 원페이지스크롤을 해제하고 기본형태로 노출시키는 경우가 대부분이다.
따라서, 해당 형태로 스크롤리파이를 적용하기 위해서는 사이즈 제한이 필요하다.
적용 방법도 간단하다.
기본 스크립트에 단 1가지 줄만 추가하면 된다.
한가지 풀지못한 것은, 자동으로 반응형이 인식 되는것이 아니라
새로고침을 해야만 가로너비를 인식하고 해당 스크립트를 활성화한다는 점이다.
(혹시나 이 글을 읽는 독자들중에 해당 이슈에 대한 개선방안을 아는시는 분은, 언제든지 의견을 부탁드립니다.)
$(function() {
if ($(window).width() >= 1200) { /*가로 너비가 1200px 이상일때만 스크롤리파이 사용*/
/*스크롤리파이 내용들*/
}
});
아래는, 해당 코드를 적용한 예시이다.
See the Pen 스크롤리파이 페이지(반응형제한) by 노미선 (@iktqscdy-the-selector) on CodePen.
03. 원페이지스크롤을 구현하지 않을 일반 페이지 섞기.
요즘에는 처음 2섹션 정도만 원페이지스크롤 형태를 사용하고, 나머지 섹션들은 일반 형태의 스크롤로 풀어버리는 경우가 더러 있다.
사실은 01번 스크롤리파이 기본형태의 footer부분도 이미 이 소스를 사용하였다.
나름 중요요소라 판단되어, 한번 더 꼬집고 넘어가고자 한다.
이번에도 스크립트는 단 1줄만 추가하면 된다.
$.scrollify({
..기본옵션들..
interstitialSection: '.footer, 적용안할페이지명',
});
마크업에서 scrollify로 지정된 class명도 삭제해줘야한다.
<!-- 원페이지스크롤 적용 섹션-->
<section class="panel panel1" data-section-name="메인"></section>
<!-- 원페이지스크롤 미적용 섹션 -->
<section class=""></section>
아래는, 해당 코드를 적용한 예시이다.
See the Pen 스크롤리파이 페이지(스크롤해제페이지 섞기) by 노미선 (@iktqscdy-the-selector) on CodePen.
04. 섹션별 헤더 색상 변경하기
원페이지스크롤 형태의 사이트는 헤더를 숨기거나, 나타내거나 2가지 경우가 존재한다.
헤더를 숨기는것은 간단하지만, 나타낼때는 디자인상 다소 복잡해질때가 있다.
가령, 섹션1의 배경은 흰색인데 섹션2의 배경은 블랙이라면...?
각 섹션에 진입할 때 마다 그에 맞는 헤더 컬러가 나오도록 스크립트와 css를 수정해야한다.
이때는, scrollify 옵션 안에 else if문을 사용하면 쉽다.
스크립트 추가 부분
// 섹션에 도달하면 클래스를 header에 추가-벗어나면 제거
if (ref === "메인" || ref === "third") {
$("header").addClass("black");
} else {
$("header").removeClass("black");
}
CSS 추가 부분
//header가 class명 'black'을 가졌을때 스타일 설정
.header.black {
color:black;
}
아래는, 해당 코드를 적용한 예시이다.
See the Pen 스크롤리파이 섹션별 헤더 컬러 전환 by 노미선 (@iktqscdy-the-selector) on CodePen.
마찬가지로, pagenation 부분도 헤더와 동일한 방식으로 처리하면 된다.
05. footer 도달 시, 헤더 숨기기
해당부분은 목차 02번,05번을 접목하여 응용하는 부분이다.
02 푸터를 일반섹션으로 구분짓고,
05 푸터 도달시에 else if문으로 헤더 상태 전환시키기.
아래는, 해당 코드를 적용한 예시이다.
See the Pen 스크롤리파이 페이지(푸터 도달시 헤더 숨기기) by 노미선 (@iktqscdy-the-selector) on CodePen.
글을 끝마치며.
다음에는 원페이지스크롤에서 카운터 애니메이션 작동시키는 방법을 남겨야겠다.
굿밤.
'퍼블리싱' 카테고리의 다른 글
| AOS animation과 slick slider 사용시 스크롤 오류 해결 (0) | 2023.07.27 |
|---|---|
| 스크롤에 반응하는 애니메이션 AOS 적용하기 | Animate On Scroll Library (0) | 2023.03.20 |
| 스크롤 반응하는 변하는 헤더 | Header change on scroll (0) | 2023.02.16 |
| 한페이지에 여러개의 다중 모달 띄우는 간단한 제이쿼리 (0) | 2023.02.15 |
