Andar

liimยท2023๋…„ 3์›” 27์ผ
0

๐Ÿ–ฅ 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๊ฐœ์˜ ๋Œ“๊ธ€