🏄‍♂️ Xexymix

• 프로젝트 이름: Xexymix
• 사용한 언어: HTML, CSS, JavaScript, jQuery
• 웹사이트 유형 : Mobile (모바일)

header 메뉴 스크롤 이벤트

HTML

<header class="header">
	<div class="header-menu on">
    	...첫번째 메뉴
	</div>   
    <div class="header-menu2">
    	...2번째 메뉴
    	<div class="group-menu2">
        ...
        </div>
        <nav class="gnb2">
        	<ul class="gnb2-list">
				<li class="gnb2-item">
					<a href="" class="link-newsale">
						신상할인
					</a>
				</li>
				<li class="gnb2-item">
					...
				</li>
			</ul>
		</nav>
	</div>
</header>

CSS

.header .header-menu2{
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 2;
    width: 100%;
    visibility: hidden;
    transition: transform 0.3s;
}
.header .header-menu2.on{
    visibility: visible;
}

jQuery

let lastScroll = 0;
$(window).scroll(function(){
    curr= $(this).scrollTop();
    if (curr>=30) {
        $('.header .header-menu2').addClass('on'); 
    } else {
        $('.header .header-menu2').removeClass('on');
    };
    if (curr>=50) {
        if (curr > lastScroll){
            $('.header .group-menu2').slideUp();            
            } else{
            $('.header .group-menu2').slideDown();
        }
    } else {
        $('.header .group-menu2').slideDown();
    };
    lastScroll = curr;
});

1. 이전 스크롤 위치를 저장하는 변수 lastScroll를 초기화 (let을 사용하여 lastScroll의 값 업데이트)

2. window에 스크롤 이벤트가 있을때 실행될 함수 만들기 $(window).scroll(function(){});

3. 현재 스크롤 위치 scrollTop();를 변수 curr에 저장

4. 조건문을 사용하여 현재 스크롤 위치 curr가 30 이상일때, .header .header-menu2에 on 클래스를 추가하고 그렇지 않으면 on 클래스를 제거하기

5. 조건문을 사용하여 현재 스크롤 위치 curr가 50 이상이면서, 이전 스크롤 위치 lastScroll보다 크면 (아래 방향으로 스크롤 할때) .group-menu2의 slideUp(); 메뉴를 닫고, 그렇지 않으면 (위쪽으로 스크롤 할때)slideDown(); 메뉴 열기

6. 현재 스크롤 위치가 50 미만일때는 group-menu2의 slideDown(); 메뉴를 열기

7. 다음 스크롤 이벤트에서 다시 비교하기 위해 현재 스크롤 위치 curr를 이전 스크롤 위치 lastScroll로 업데이트하기

Swiper pagination 스타일링

HTML

<section class="sc-best">
	<h2 class="headline">베스트 아이템</h2>
	<div class="swiper best-slide">
		<div class="swiper-pagination"></div>
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				...
			</div>
		</div>
	</div>	
</section>

CSS

.sc-best .swiper-pagination{
    display: flex;
    padding: 0 5%;
    gap: 6%;
    padding-bottom: 20px;
}
.sc-best .swiper-pagination button{
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #aaa;
}
.sc-best button.swiper-pagination-bullet-active{
    color:#000;
    font-weight: 600;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sc-best button.swiper-pagination-bullet-active::after{
    content: '';
    width: 7px;
    height: 7px;
    background: #ff6d44;
    border-radius: 50%;
}

JavaScript / jQuery

bestBtn = ['전체', '맨즈', '아우터', '골프', '키즈', '슈즈&용품']
const bestSlide = new Swiper(".best-slide", {
	pagination: {
		el: ".best-slide .swiper-pagination",
		clickable: true,
    	renderBullet: function (index, className) {
    		return '<button class="' + className + '">' + (bestBtn[index]) + '</button>';
    	}
	}
});

1. 버튼에 표시될 텍스트를 담은 배열을 선언 (bestBtn)

2. Swiper 라이브러리를 사용하여 클래스 .best-slide를 슬라이드로 초기화

3. pagination의 el을 활용하여 페이징이 추가될 클래스를 지정하기

4. 각각의 Bullet(버튼)을 렌더링하는 함수를 정의

5. 함수를 사용하여 Bullet(버튼)의 HTML 코드를 동적으로 생성. 텍스트가 들어가는 자리에 bestBtn[index]를 넣어 배열에서 각각 해당 인덱스에 위치한 텍스트가 순서대로 들어갈수 있도록 만들기. 여기서 *className은 Swiper가 제공하는 클래스 이름

6. 개발자 모드로 Bullet(버튼)의 위치 및 클래스를 파악한 후 CSS를 활용하여 스타일링 하기

Swiper의 주요 옵션들

autoplay

const mySwiper = new Swiper('.swiper-container', {
    ...
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
});

Swiper의 autoplay 옵션은 슬라이드가 자동으로 변경되는 자동 재생 기능을 제공합니다.

delay

autoplay의 옵션 delay는 슬라이드 간의 자동 전환 지연 시간을 밀리초 단위로 설정할 수 있게 하며 만약에 delay의 값이 없다면 자동 재생이 되지 않습니다.

disableOnInteraction

기본적으로, 사용자가 슬라이드와 상호 작용할 때 (직접 Swipe 할때) 자동 재생이 일시 중지됩니다. 이 옵션을 false로 설정하면 사용자의 상호 작용 후에도 자동 재생이 계속 유지됩니다.

slidesPerView / spaceBetween

const mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 20,
});

slidesPerView

slidesPerView는 현재 화면에 몇 개의 슬라이드가 보이는지를 나타내며 정수(1,2,3,...) 값으로 설정하거나 auto로 설정할 수 있습니다.

*auto로 설정했을때는 각 슬라이드들의 width를 꼭 auto로 설정해야 합니다. (auto로 설정 하지 않으면 1개의 슬라이드만 보이게 된다.)

spaceBetween

spaceBetween은 슬라이드 간의 간격을 설정합니다. 픽셀 단위로 값을 설정하거나(px생략), auto로 설정하여 슬라이드 간의 간격을 자동으로 조절할 수 있습니다.

loop / speed

const mySwiper = new Swiper('.swiper-container', {
    loop: true,
    speed: 1000,
});

loop

loop은 슬라이드가 처음에서 끝으로 이동하거나 끝에서 처음으로 이동할 때 무한 루프를 생성합니다.

speed

speed는 슬라이드 전환의 속도를 밀리초 단위로 지정하며 값이 낮을수록 빠르게, 높을수록 느리게 전환됩니다.

Swiper의 Pagination 종류

기본 (Bullet)

pagination: {
    el: '.swiper-pagination',
    clickable: true,
}

Swiper가 자동으로 생성하는 페이징 버튼으로 각 슬라이드에 대한 작은 점 bullet이 페이지를 나타냅니다.

Fraction (분수)

pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
}

현재 슬라이드의 인덱스와 전체 슬라이드 개수를 분수 형태로 표시하는 pagination입니다.

Progress (진행막대)

pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
}

슬라이드 전환 진행 상황을 나타내는 진행 막대 형태의 pagination입니다.

Scrollbar

scrollbar: {
	el: '.swiper-scrollbar',
	hide: false, 
	draggable: true, 
}

scrollbar 옵션은 슬라이드 컨테이너에 수평 또는 수직 스크롤바를 추가하는 데 사용됩니다. 사용자가 슬라이드를 스크롤할 때 어디에 있는지를 시각적으로 나타내는 데 유용합니다.

hide

스크롤바를 숨길지 여부를 결정합니다. true로 설정하면 사용자가 마우스를 움직일 때만 스크롤바가 표시됩니다.

draggable

사용자가 스크롤바를 직접 조작할 수 있는지 여부를 결정합니다. true로 설정하면 사용자가 스크롤바를 드래그하여 슬라이드를 이동할 수 있습니다.

*Progress와 혼동하지 않도록 주의해야 합니다.