네이버커리어

hyesukHan·2023년 11월 27일

project

목록 보기

3/8

📂네이버커리어

사이트명: NAVER Carrers
사용언어: HTML5, CSS3, js
라이브러리: Swiper, jquery
유형: PC 반응형
💻 https://hyesukhan.github.io/230923_naver_careers/

✅ Check Point

✔ hover메뉴 만들기
✔ 이벤트 제어
✔ 메인 슬라이드 텍스트 애니메이션
✔ 반응형 이미지 만들기

1.hover메뉴 만들기

html

			<nav class="gnb">
                <ul class="gnb-list">
                    <li class="item">
                        <a href=""><span>Teams</span></a>
                        <ul class="sub">
                            <li><a href=""><span>Tech</span></a></li>
                            <li><a href=""><span>Design</span></a></li>
                            <li><a href=""><span>Service&Business</span></a></li>
                            <li><a href=""><span>Corporate</span></a></li>
                        </ul>
                    </li>
                    <li class="item"><a href=""><span>People</span></a></li>
                    <li class="item"><a href=""><span>Benefits</span></a></li>
                    <li class="item"><a href=""><span>Culture</span></a></li>
                    <li class="item"><a href=""><span>Value</span></a></li>
                </ul>
            </nav>

css

.header::before{
    display: none;
    content: '';
    top: 100%;
    left: 0;
    width: 100%;
    height: 182px;
    background: #fff;
    position: absolute;
    z-index: 2;

}
.header.on::before{
    display: block;
}

jquery

$('.header-right .gnb-list .item').hover(function(){
  if($(this).find('.sub').length){
    $('.header').addClass('on');
    $(this).find('.sub').addClass('on');
  }
},function(){
  $('.header,.header-right .sub').removeClass('on');
  
})

header가 on일때 before가상요소로 호버메뉴의 배경을 만들어준다.
메뉴에 서브메뉴가 있으면 on을 넣어주고 on일때 서브메뉴 display:flex를 준다.

이벤트 제어

  .sc-visual .swiper .swiper-slide video{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0; left: 0; right: 0; bottom: 0;
        object-fit: cover;
        pointer-events: none;
    }

모든 비디오에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화한다.

메인슬라이드 텍스트 애니메이션

.sc-visual .swiper-slide.swiper-slide-active .headline .text{
    display: block;
    overflow: hidden;
    animation: wave-in 0.8s ease-out forwards, fade 0.8s linear forwards;
}
@keyframes wave-in {
    from{
        width: 0%;
    }
    to{
        width: 100%;
    }
}
@keyframes fade {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

slide가 active 되면 animation이 실행된다. 0.8초 동안 길이가 0에서 100%까지 변경되면서 투명도가 0에서 1까지 변경된다.

반응형 이미지 만들기

.sc-people .swiper .img-container{
    position: relative;
    width: 100%;
    padding-bottom: 47.403%;
}
.sc-people .swiper .img-container img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0; bottom: 0; right: 0;
    object-fit: cover;
}