이전 서울시청에서 없던 기능을 제이쿼리로 구현하는 것을 중심으로 정리해보았다. 서울시청에 비해서는 동적인 사이트고, 제이쿼리를 사용할만한 부분도 더 있었다.
1.상단 메뉴 픽스
<script>
$(window).scroll(function(){
const curr=$(window).scrollTop();
if (curr>0) {
$('.header-inner').addClass('fixed')
} else {
$('.header-inner').removeClass('fixed')
}
})
</script>안다르 모바일 사이트는 화면을 내리면 메뉴모양이 변경되어 최상단에 고정되고 다시 올라가면 원래대로 돌아간다.
처음에 구현할 때는 원래메뉴와 고정된 메뉴를 따로 마크업해서 제작했는데, 굳이 따로 제작하지 않아도 되고 한 번 마크업을 해둔 걸로 css만 수정하여 계속 쓴다고 한다.
기존 header-inner는 기본메뉴로 만들고, fixed클래스를 붙이면 최상단에 고정되는 것으로 만들었고
위의 제이쿼리를 이용해 현재 화면의 위치가 0보다 크다면 fixed클래스를 붙여주고, 아니라면 클래스를 제거해준다.
2.dimmed, 클릭시 메뉴나오기, 메뉴세부내역
<style>
.dimmed{
position: fixed;
top: 0; left: 0; right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 11;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.dimmed.active{
visibility: visible;
opacity: 1;
}
.hidden{
height:100%;
min-height:100%;
overflow:hidden;
}
</style>
<script>
$('.btn-menu').click(function (e) {
e.preventDefault();
$('.gnb-area, .dimmed').addClass('active');
$('body').addClass('hidden');
})
$('.btn-close, .dimmed').click(function (e) {
e.preventDefault();
$('.gnb-area, .dimmed').removeClass('active');
$('body').removeClass('hidden');
})
</script>메뉴 버튼을 눌렀을 때 왼쪽에서 메뉴가 나오면서 배경이 어둡게 변하는 기능이 있는데
그럴 때는 메뉴와 배경을 따로 만들어주어야 한다.
어두운 배경은 dimmed라는 클래스명으로 마크업할 때의 위치는 헤더 시작하자마자 바로아래에 만들어주면 되고 css는 position: fixed;와 화면 전체에 고정시키고, z-index를 gnb-area보다는 낮게, 다른 컨텐츠보다는 높게 준다.
transition: .3s;은 active클래스가 아니라 원형css에 들어가 있어야 사라질 때 나타날때 둘 다 적용된다.
dimmed같은 경우에는 display:none 대신 visibility와 opacity를 준다.
active클래스로 보여지고 숨기는 기능을 구현할 때는 css 꾸미는건 기본에 다 꾸민 후 display:none이나 visibility: hidden;을 추가해서 숨겨주고, active클래스에는 나타내기만 하면 되는 식으로 구성한다.
아랫부분의 제이쿼리는 btn-menu버튼을 누르면 gnb-area, dimmed에 active클래스가 추가되어 나타나게 되고, 바디에는 hidden 클래스가 추가되어 움직이지 못하게 된다.
dimmed를 클릭하거나 btn-close 버튼을 누르면 반대로 active,hidden을 제거해주게 된다.
<script>
$('.gnb-area .btn-category').click(function(e){
e.preventDefault();
// active로 꾸며주기
$(this).toggleClass('active');
$(this).siblings('.sub-list').stop().slideToggle();
})
</script>위는 큰 메뉴의 서브메뉴를 동작하는 제이쿼리이다.
서브메뉴를 보여주는 active클래스가 붙어있으면 제거해주고 없으면 붙여주는 toggle을 사용했다.
3.상단 올라가는 버튼
<script>
let last=0;
$(window).scroll(function(){
const curr = $(window).scrollTop();
if (curr < last) {
$('.fixed-area').addClass('active');
} else{
$('.fixed-area').removeClass('active');
}
last=curr;
</script>해당 사이트는 마우스 휠을 올리면(혹은 화면,스크롤을 올리면) 위로가기 버튼이 나타나고, 내리면 사라진다.
active를 붙이고 뗄 지점을 정하기 위해서 last변수를 0으로 지정해 준 후 현재 스크롤바의 수직 위치를 반환하는 scrollTop();를 사용하여 curr변수에 현재위치를 넣는다.
처음에는 0부터 시작하기 때문에 만약 휠을 내려 현재 화면의 위치가 0보다 커지면 active를 제거해주고(버튼이 보이지 않도록), curr의 값을 last에 넣어준다.
만약 1만큼 내려왔다면 last값은 0과 1의 비교이므로 무조건 last값이 작게 되고, 위로가기 버튼이 보이지 않게 되는 것이다. 그 뒤에 curr값과 last값이 같아진다. 스크롤위치를 더 내리면 2,3만큼 내려오면서 계속 이 과정을 반복한다(1과 2의 비교, 2와 3의 비교 등)
반대로 last값이 100인 시점에서 화면을 1만큼 올려 curr값이 99가 된다면 curr값이 작으므로 active클래스를 추가해주어 버튼이 보이게 된다. 역시 스크롤이 올라가는 동안에는 100과 99, 99와 98을 비교하는 과정을 반복한다.
4.swiper의 불렛
<span class="swiper-pagination-bullet swiper-pagination-bullet-active">1</span>
<span class="swiper-pagination-bullet">2</span>
<span class="swiper-pagination-bullet">3</span>
<span class="swiper-pagination-bullet">4</span>
<span class="swiper-pagination-bullet">5</span>
<script>
.sc-slide .swiper .swiper-pagination{
bottom: 37px;
width: 171px;
left: 50%;
transform: translateX(-50%);
}
.sc-slide .swiper .swiper-pagination-bullet{
margin: 0;
background: #fff;
border-radius: 0;
width: 20px;
height: 2px;
opacity: 0.3;
}
.sc-slide .swiper .swiper-pagination-bullet-active{
opacity: 1;
}
</script>swiper의 페이지네이션 중에는 원형버튼으로 된 것이 기본형태이다. 서울시청에서는 숫자로 된 페이지네이션을 썼는데 여기서는 원형버튼으로 된 것을 변형하여 사용했다.
페이지네이션 버튼의 기본 클래스명은 swiper-pagination-bullet이고, 활성된 버튼의 클래스명은 swiper-pagination-bullet-active이다.각각의 클래스에 평상시와 활성화된 버튼을 꾸며주면 된다.
+독립적 섹션으로 주기에는 좀 작은 영역인 경우 section말고 article를 주어 마크업을 한다.
<article class="sc-coupon">
<div class="coupon-area">
<a href="" class="link-coupon"><img src="./asset/images/coupon.jpg" alt="안다르가 처음이라면? 3천원 할인쿠폰 받기"></a>
</div>
</article>