이 이야기는 (여러 퍼블리셔들과 개발자들이 그러하듯) 스크롤을 통한 마우스휠 풀페이지의 대명사 fullpage.js를 대체하기 위한 삽질을 뜨면서 시작되었습니다.
fullpage.js는 아시다시피 라이센스가 있는 라이브러리라서 상업적 이용은 오직 구매로써 가능해집니다. (구매가 한 큐에 되는 거였으면 이런 개고생도 안 했겠지) 결과적으로 fullpage를 구현하기 위해서는 라이브러리를 사용하기보다 직접 만드는 수 밖에 없었는데요.
처음에는 scroll snap css로 어떻게든 해보자 싶었지만 섹션과 섹션 사이에 넘어가는 애니메이션 속도를 조절하기 어려웠고 또 메뉴를 넣었더니 메뉴 링크대로 넘어가지도 않는 대환장 파티가 벌어졌습니다.
(서치해보니 이미 저와 같은 사람이 있었다는 것에 눈물이.. https://ethansup.net/blog/scroll-snap-instead-fullpage 나는 왜 다 하고서 이걸 발견했는가)
우선 제가 구현하고자 하는 풀페이지의 기능은,
1. 전체 스크롤(마우스휠) 풀페이지일 것
2. 상단 메뉴가 fixed이고 스크롤 넘어갈 때마다 메뉴 배경이 유동적일 것
3. 풀페이지로 넘어갈 때 우측에 navigation dots가 있을 것
4. 마지막 섹션에 다다르면 footer가 올라와줄 것
인데... 이게 되면 저게 안 되고 저게 되면 이게 안 되고 결국 온갖 오만 삽질을 혼자 다 하다가 swiper.js로 fullpage.js를 어느정도 구현할 수 있다는 내용을 발견하게 되었습니다. 철이 없었죠. 이걸로 다 땡칠 줄 알았다는게... (이 이후로 ing는 계속..)
여하튼, 아래 내용은 온갖 삽질 끝에 나온 결과물입니다. 저와 같은 피해자가 없길 바라며 잡소리는 끝. (풀페이지도 끝!)
(구현결과는 꼭 codepen에서 fullpage screen으로 보세요)
See the Pen fullpage (swiper.js) by ivory (@imivory) on CodePen.
[tip] 아크로뱃 DC (acrobat DC) 한글 깨지는 부분 해결 방법 (0) | 2022.03.14 |
---|---|
[tip] input[type="date"]에서 날짜와 아이콘 사이의 공백 줄이기 (0) | 2022.03.14 |
[tip] css로 속성 선택하기 (문자열 일치) (0) | 2022.03.02 |
[tip] a 링크, label 선택 버튼 (button) 체크 형태 만들기 (0) | 2022.01.11 |
[tip] 가격(숫자 3자리, 천단위)에 자동 콤마 (input or div) 넣기 (0) | 2022.01.10 |
탭이 4,5개 이상 넘어버릴 때 디자인을 하기가 참 난감한 상황이 간혹 생깁니다. 탭을 나열하는 디자인 방식이라더라도 웹에서는 자연스러워 보일 지 모르겠지만 모바일 상에서 볼 때는 화면을 너무 차지해 지저분해보일 수 있으니까요.
이럴 때 쓰면 좋을 플러그인이 바로 slick.js 플러그인과 swiper.js 플러그인을 쓰는 방식인데요. 두 플러그인 전부 실무에서 많이 쓰는 플러그인인 만큼 실용성이 좋습니다.
먼저 <head> 안에 아래 스크립트로 세팅해줍니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
그 다음, <style>과 <body>, <script>에 각각 소스를 넣어주세요.
<style>
.slick-initialized .swipe-tab-content {
position: relative;
min-height: 365px;
}
@media screen and (min-width: 767px) {
.slick-initialized .swipe-tab-content {
min-height: 500px;
}
}
.slick-initialized .swipe-tab {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: none;
border: 0;
color: #757575;
cursor: pointer;
text-align: center;
border-bottom: 2px solid rgba(0, 0, 0, 0);
transition: all 0.5s;
}
.slick-initialized .swipe-tab:hover {
color: #000;
}
.slick-initialized .swipe-tab.active-tab {
border-bottom-color: #000;
color: #000;
font-weight: bold;
}
.main-container {
padding: 25px;
background: #f1f1f1;
}
<body>
<div class="sub-header ">
<div class="swipe-tabs">
<div class="swipe-tab">One</div>
<div class="swipe-tab">Two</div>
<div class="swipe-tab">Three</div>
<div class="swipe-tab">Four</div>
<div class="swipe-tab">Five</div>
</div>
</div>
<div class="main-container">
<div class="swipe-tabs-container ">
<div class="swipe-tab-content">Tab 1</div>
<div class="swipe-tab-content">Tab 2</div>
<div class="swipe-tab-content">Tab 3</div>
<div class="swipe-tab-content">Tab 4</div>
<div class="swipe-tab-content">Tab 5</div>
</div>
</div>
<script>
$(function () {
'use strict';
var $swipeTabsContainer = $('.swipe-tabs'),
$swipeTabs = $('.swipe-tab'),
$swipeTabsContentContainer = $('.swipe-tabs-container'),
currentIndex = 0,
activeTabClassName = 'active-tab';
$swipeTabsContainer.on('init', function(event, slick) {
$swipeTabsContentContainer.removeClass('invisible');
$swipeTabsContainer.removeClass('invisible');
currentIndex = slick.getCurrent();
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
$swipeTabsContainer.slick({
//slidesToShow: 3.25,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
$swipeTabsContentContainer.slick({
asNavFor: $swipeTabsContainer,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
draggable: false,
touchThreshold: 10
});
$swipeTabs.on('click', function(event) {
// gets index of clicked tab
currentIndex = $(this).data('slick-index');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName);
$swipeTabsContainer.slick('slickGoTo', currentIndex);
$swipeTabsContentContainer.slick('slickGoTo', currentIndex);
});
//initializes slick navigation tabs swipe handler
$swipeTabsContentContainer.on('swipe', function(event, slick, direction) {
currentIndex = $(this).slick('slickCurrentSlide');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
});
이렇게 완성!
하면 좋겠지만 탭 자체가 좌우 화살표가 없어 조금 불편합니다.
화살표까지 넣어보도록 하겠습니다.
<body> .sub-header 안에 내용을 추가합니다.
<div class="arrowSlider">
<span class="prev" id="aro1_prev">◀</span>
<span class="next" id="aro1_next">▶</span>
</div>
swiper 슬라이더에 slick 탭이 있는 상황이기 때문에 slick 탭에 화살표를 넣어주어야 합니다. <script>에 적어둔 내용에 아래 내용으로 수정해주세요.
$swipeTabsContainer.slick({
//slidesToShow: 3.25, // 추가 수정된 내용!
slidesToShow: 8,
slidesToScroll: 1,
arrows: true, // 추가 수정된 내용!
prevArrow: $('#aro1_prev'), // 추가 수정된 내용!
nextArrow: $('#aro1_next'), // 추가 수정된 내용!
infinite: false,
swipeToSlide: true,
touchThreshold: 10,
responsive: [
{
breakpoint: 934,
settings: {
slidesToShow: 3,
}
}
]
});
마지막으로 <style>에 아래 내용을 넣어주면 완성입니다.
.arrowSlider {position:relative;}
#aro1_prev {position:absolute;left:0px;cursor:pointer;}
#aro1_next {position:absolute;right:0px;cursor:pointer;}
.slick-slider {margin:0 30px;}
이렇게 되면 화살표가 있는 형태로 완성됩니다.
반응형이기 때문에 모바일에서도 깔끔하게 보여집니다.
[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0) | 2020.04.07 |
---|---|
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2) | 2017.07.24 |
[JQueryRotate] 이미지 회전 애니메이션 (0) | 2017.06.16 |
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2) | 2017.06.14 |
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |