📂우아한형제들

• 사이트명: 우아한형제들
• 사용언어: HTML5, CSS3, js
• 라이브러리: Swiper, jquery
• 유형: PC 반응형
• 💻 https://hyesukhan.github.io/230930_wooah/

✅ Check Point

✔ 스크롤에 반응하는 헤더
✔ 메인슬라이드 이미지 이동
✔ 메인슬라이드 글자 애니메이션
✔ 무한롤링배너 만드는 법(스와이퍼)
✔ 백그라운드 고정

1. 스크롤에 반응하는 헤더

jquery

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

  if(curr>lastScroll){
      $('header').addClass('hide');
  }else{
      $('header').removeClass('hide');

  }
  lastScroll = curr;
})

css

.header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 95px;
    width: 100%;
    background: #fff;
}
.header.hide{
    transform: translateY(-100%);
    transition: 0.5s;
}

스크롤을 내리면 현재값보다 lastScroll값이 작아져서 hide클래스가 제거되고, 스크롤을 올리면 현재값이 lastScroll값보다 커져서 hide클래스가 추가된다. hide일때 header를 위로 100%올려서 보이지 않도록 만든다.

2. 메인슬라이드 이미지 이동

css

.sc-visual .swiper .swiper-slide .img-container,.sc-visual .swiper .swiper-slide .video-container{
    height: calc(100vh - 95px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}
.sc-visual .swiper .swiper-slide .img-container img , .sc-visual .swiper .swiper-slide .video-container video{
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.sc-visual .swiper .swiper-slide.left .img-container img{
    width: 130%;
    max-width: none;
    transition: 5s;
}
.sc-visual .swiper .swiper-slide-active.left .img-container img{
    transform: translatex(10%);
}

컨테이너에 overflow:hidden을 주고 이미지를 중앙 정렬한다.
이미지는 가득 채우고 이동할 이미지는 넘치게 키워준다. 슬라이드가 active되면 넘친 이미지를 옆으로 옮긴다.

3.메인슬라이드 글자 애니메이션

html

<h3 class="title">
   콩 한쪽도 <br>
      <span class="typo">
         <span>나</span>
         <span>눠</span>
         <span>먹</span>
         <span>으</span>
         <span>랬</span>
         <span>으</span>
         <span>니</span>
         <span>까</span>
   </span>
</h3>

css

.sc-visual .swiper-slide .text-area .title .typo span{
    min-width: 2vw;
    opacity: 0;
}
.sc-visual .swiper-slide-active .text-area .title .typo span{
    opacity: 1;
    transition: 1s;
}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(1){ transition-delay:0.1s ;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(2){ transition-delay: 0.2s ;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(3){ transition-delay: 0.3s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(4){ transition-delay: 0.4s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(5){ transition-delay: 0.5s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(6){ transition-delay: 0.6s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(7){ transition-delay: 0.7s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(8){ transition-delay: 0.8s;}
.sc-visual .swiper-slide-active .text-area .title .typo span:nth-child(9){ transition-delay: 0.9s;}

transition delay를 각 글자마다 따로 걸어준다.

4.무한롤링배너 만드는 법(스와이퍼)

swiper script

  var swiper2 = new Swiper(".sc-story .swiper", {
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
    speed: 6000,
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 16,
});

css

.sc-story .swiper .swiper-wrapper{
    transition-timing-function: linear; //스와이퍼 흘러가는 속도 일정하게
    padding: 50px 0;

}

5. 백그라운드 고정

html

 			<div class="bg"></div>
            <a href="">
                <div class="content">
                    <div class="green-logo"><img src="./assets/images/sc-green/green-logo.png" alt></div>
                    <h3 class="headline">
                        잘 먹겠습니다 <br>
                        잘 버리겠습니다
                    </h3>
                    <div class="img-container"><img src="./assets/images/sc-green/illust.png" alt=""></div>
                    <p class="desc">
                        지구에게 건네는 작지만 큰 인사<br>
                        배달의민족과 함께 지구에게 인사를 건네 볼까요?
                    </p>
                </div>
            </a>

css

.sc-green .bg{
    background: url(../images/sc-green/bg-season.jpg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-attachment: fixed;
    z-index: -1;
    background-size: cover;
}

bg를 absolute에 t0 r0 b0 r0로 섹션영역에 가득차게 만들고 background-attachment: fixed; 속성을 이용해 배경을 고정시킨다.