πŸ–₯ Andar 클둠코딩 / Mobile


πŸ“’ Check Point

  1. μŠ¬λΌμ΄λ“œ (λ°°λ„ˆ, 메인)
  2. 슀크둀 이벀트
  3. μ‚¬μ΄λ“œ 메뉴
  4. tabν‚€ μΉ΄ν…Œκ³ λ¦¬ μ „ν™˜
  5. 동일 클래슀 μ‚¬μš©


1-1. λ°°λ„ˆ μŠ¬λΌμ΄λ“œ

const bannerSlide1 = new Swiper(".banner-slide1", {
    loop: true,
    effect: 'fade',
    speed: 2000,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
});
  • autoplay 3초 κ°„κ²©μœΌλ‘œ λ‚΄μš©μ΄ μžλ™ μ „ν™˜λ˜λ„λ‘
  • disableOnInteraction: false둜 μŠ€μ™€μ΄ν”„ ν›„ μžλ™ μž¬μƒμ΄ λΉ„ν™œμ„±ν™” λ˜μ§€ μ•Šλ„λ‘
  • speed둜 속도 쑰절!


1-2. 메인 μŠ¬λΌμ΄λ“œ

πŸ‘‰ νŽ˜μ΄μ§€λ„€μ΄μ…˜ μ»€μŠ€ν…€

/* .CSS */
.sc-visual .swiper-pagination{
    bottom: 37px;
    width: 171px;
    left: 50%;
    transform: translateX(-50%);
}
    .sc-visual .visual-slide .swiper-pagination-bullet{
    background: #fff;
    width: 20px;
    height: 2px;
    margin: 0;
    border-radius: 0;
}
//.js
const visualSlide = new Swiper(".visual-slide", {
    loop: true,
    effect: 'fade',
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});
  • κΈ°λ³Έ μŠ€νƒ€μΌμ„ μ‚¬μš©ν•˜μ§€ μ•Šκ³  width, color, border-radius λ“±μœΌλ‘œ νŽ˜μ΄μ§€λ„€μ΄μ…˜ μ˜μ—­ μŠ€νƒ€μΌλ§


2. 슀크둀 이벀트

πŸ‘‰ 헀더 μ˜μ—­ ꡬ성

<div class="group-flex">
    <h1 class="logo">
        <a href="">
            <span class="blind">μ•ˆλ‹€λ₯΄</span>
            <svg width='80' height='21' viewBox='0 0 80 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='(μƒλž΅)' fill='#fff'/></svg>
        </a>
    </h1>

    <div class="util-area">
        <a href="" class="btn-menu" id="menuBtn">
            <span class="blind">메뉴</span>
            <svg width='20' height='17' viewBox='0 0 20 17' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='(μƒλž΅)' fill='#fff'/></svg>
        </a>
        <a href="" class="btn-search">
            <span class="blind">검색</span>
            <svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μƒλž΅)' fill='#fff'/></svg>
        </a>
    </div>
    <div class="util-area">
        <a href="" class="btn-cart">
            <span class="blind">μž₯λ°”κ΅¬λ‹ˆ</span>
            <svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μƒλž΅)' fill='#fff'/></svg>
        </a>
        <a href="" class="btn-mypage">
            <span class="blind">λ§ˆμ΄νŽ˜μ΄μ§€</span>
            <svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μƒλž΅)' fill='#fff'/></svg>
        </a>
    </div>
</div>
  • 둜고 μ˜μ—­ / μ™Όμͺ½ 메뉴 / 였λ₯Έμͺ½ 메뉴
  • μ˜μ—­μ„ 3개둜 λ‚˜λˆ„μ–΄ flex둜 μ •λ ¬
  • λ‘œκ³ λŠ” absolute둜 쀑앙 μœ„μΉ˜
.header .group-flex .logo{
	position: absolute;
	top: 50%;left: 50%;
	transform: translate(-50%, -50%);
}
.header.on{ position: fixed; top: 0; }
.header.on .group-flex{ background: #fff; }
.header.on .group-flex svg path{ fill: #000 }
.header.on .gnb{ visibility: visible; opacity: 1; }
  • 'on' 클래슀λ₯Ό μΆ”κ°€ν•˜μ—¬ μŠ€ν¬λ‘€μ„ 내렸을 λ•Œμ˜ μŠ€νƒ€μΌ μ…‹νŒ…
  • svg의 μž₯점인 μ½”λ“œλ₯Ό ν†΅ν•œ 컬러 λ³€κ²½ fill: #000

πŸ‘‰ header, fix-btn 슀크둀 슀크립트

let scrollTop = 0;
$(window).scroll(function(){
    const curr = $(this).scrollTop();

    if ( curr > 0 ) {
        $('.header').addClass('on')
    } else {
        $('.header').removeClass('on')
    }  

    if(curr >= 100){
        if (curr < scrollTop) {
            $('.fixed-btns').addClass('show');
        } else {
            $('.fixed-btns').removeClass('show');
        }
        scrollTop = curr;
    } else {
        $('.fixed-btns').removeClass('show');
    }
});

$(window).trigger('scroll');

1) header

  • ν˜„μž¬ μŠ€ν¬λ‘€κ°’μ΄ 0보닀 크면 (슀크둀 내리면) κ²€μ • 둜고의 헀더가, κ·Έλ ‡μ§€ μ•ŠμœΌλ©΄ (슀크둀 올리면) 흰색 둜고의 헀더가 보여진닀.

2) fix-btn
ν˜„μž¬ μŠ€ν¬λ‘€κ°’μ΄ 100 이상이고

  • scrollTop보닀 μž‘μ„ λ•Œ λ‚˜νƒ€λ‚œλ‹€. = μ˜¬λ Έμ„ λ•Œ
  • scrollTop보닀 크면 사라진닀. = 내렸을 λ•Œ
  • 슀크둀 이동 후에도 scrollTop = curr; 둜 μ–΄λŠ μœ„μΉ˜μ—μ„œλ‚˜ ν˜„μž¬ μœ„μΉ˜λ₯Ό scrollTop κ°’μœΌλ‘œ μž¬ν• λ‹Ήμ‹œμΌœ ν˜„μž¬ μœ„μΉ˜κ°€ λ‹€μ‹œ 기쀀이 λœλ‹€.


3. μ‚¬μ΄λ“œ 메뉴

.aside-menu{
	position: fixed;
	width: 81.94%;
	height: 100%;
	background: #fff;
	top: 0;
	left: -100%;
	transition: all 0.5s ease;
	visibility: visible;
	z-index: 10;
	overflow: auto;
	padding: 0 16px;
}
.aside-menu.on{
	left: 0;
}
  • left 값을 -100%을 μ£Όμ–΄ μ™Όμͺ½μœΌλ‘œ μ™„λ²½νžˆ 밀어놓은 ν›„
  • 메뉴 λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 'on' ν΄λž˜μŠ€κ°€ μΆ”κ°€λ˜μ–΄ left: 0으둜 μ›λž˜ μœ„μΉ˜λ‘œ λ‚˜μ˜€κ²Œ λœλ‹€.
// .js
$('.btn-menu').click(function(e){
    e.preventDefault(); 
    $('.aside-menu').addClass('on')
});

$('.btn-close').click(function(e){
    e.preventDefault();
    $('.aside-menu').removeClass('on')
});

πŸ‘‰ λ°±κ·ΈλΌμš΄λ“œ μ˜μ—­ μ œμ–΄

.gnb-bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	background: #000;
	opacity: 0;
	z-index: 9;
}
.gnb-bg.on{
	opacity: 0.5;
	visibility: visible;
}
  • μ•½κ°„ μ–΄λ‘μš΄ 효과λ₯Ό bg λΌλŠ” 클래슀둜 κΎΈλ―Ό ν›„ μ•„λž˜ 슀크립트둜 μ‚¬μ΄λ“œλ©”λ‰΄κ°€ λ‚˜νƒ€λ‚¬μ„ λ•Œ μ˜μ—­ ꡬ뢄을 μ£Όμ—ˆλ‹€.
// μ‚¬μ΄λ“œ 메뉴 열렸을 λ•Œ
$('#menuBtn').click(function(e){
  e.preventDefault();

  $('.aside-menu,.gnb-bg').addClass('on');
  $('body').addClass('hidden')
});

// μ‚¬μ΄λ“œ 메뉴 λ‹«ν˜”μ„ λ•Œ
$('.aside-menu .btn-close,.gnb-bg').click(function(e){
  e.preventDefault();
  
  $('.aside-menu,.gnb-bg').removeClass('on');
  $('body').removeClass('hidden')
});

$('body').addClass('hidden')

/* body에 μΆ”κ°€ν•œ μŠ€νƒ€μΌ */
.hidden{
    overflow: hidden;
}
  • μ‚¬μ΄λ“œ 메뉴가 열렸을 λ•Œ, ν•΄λ‹Ή μ˜μ—­ λ‚΄μ—μ„œλ§Œ 슀크둀 되고 λ°±κ·ΈλΌμš΄λ“œ μ˜μ—­μ—μ„œλŠ” 슀크둀 λ˜μ§€ μ•Šλ„λ‘ κ°œμ„ ν•˜μ˜€λ‹€.


4. tab ν‚€λ‘œ μΉ΄ν…Œκ³ λ¦¬ μ „ν™˜

<div class="group-cate">
    <ul class="cate-list">
        <li class="cate-item"><a href="" data-tab="#all" class="point">전체</a></li>
        <li class="cate-item"><a href="" data-tab="#women">우먼즈</a></li>
        <li class="cate-item"><a href="" data-tab="#men">맨즈</a></li>
        <li class="cate-item"><a href="" data-tab="#homeacc">ν™ˆνŠΈμš©ν’ˆ & ACC</a></li>
    </ul>
</div>

  • data-tab, id κ°’μœΌλ‘œ λ²„νŠΌκ³Ό μ½˜ν…μΈ λ₯Ό μ—°κ²°μ‹œμΌ°λ‹€.
/* .css */
.sc-collect .prd-list.tab{
	display: none;
}
.sc-collect .prd-list.tab.on{
	display: flex;
	gap: 17px;
	flex-wrap: wrap;
}

.group-cate .cate-list .cate-item a.point{
	font-weight: 700;
	color: #FFFFFF;
	background: #B75622;
	border-radius: 60px;
	margin-bottom: 22px;
}
// .js
$('.sc-collect .cate-item a').click(function(e){
    e.preventDefault();

    target = $(this).data('tab');
   
 	$(this).addClass('point').parent().siblings().children().removeClass('point');
    $(target).addClass('on').siblings().removeClass('on');
});
  • 'on' 클래슀λ₯Ό 톡해 μ„ νƒλœ μΉ΄ν…Œκ³ λ¦¬μ˜ μ½˜ν…μΈ λ§Œ 보여진닀.


5. 동일 클래슀 μ‚¬μš©

πŸ‘‰ 같은 λ ˆμ΄μ•„μ›ƒμ˜ μ˜μ—­μ€ 클래슀λͺ…을 λ™μΌν•˜κ²Œ μž‘μ„±

  • λ ˆμ΄μ•„μ›ƒμ΄ λ™μΌν•˜κ³  μ½˜ν…μΈ (사진, κΈ€)만 λ‹€λ₯Έ μ˜μ—­μ€ λ™μΌν•œ 클래슀λͺ…을 μ‚¬μš©ν•˜μ—¬ 쀑볡될 수 μžˆμ—ˆλ˜ μ½”λ“œλ₯Ό μ€„μ˜€λ‹€.
profile
Web Publisher

0개의 λŒ“κΈ€

Powered by GraphCDN, the GraphQL CDN