🛠 국립현대미술관

• 사이트명 : 국립현대미술관
• 제작기간 : 22.11.09 ~ 22.11.12 (4일 소요)
• 사용언어 : html, scss
• 라이브러리 : jQuery, swiper, gsap
• 분류 : pc적응형, 리뉴얼

---

📌 Review!!

1. 스크롤에 따라 나타나는 헤더

🔎 코드분석

lastScroll = 0;

gsap.set('.gnb .gnb-item', {
  opacity: 0,
  yPercent: -100,
})

const gnbActive = gsap.to('.gnb .gnb-item', {
  opacity: 1,
  yPercent: 0,
  stagger: 0.15,
})

gnbFlag = false;
$(window).scroll(function(){
  curr = $(this).scrollTop();
  if(curr >= 50) {
    if(curr > lastScroll) {
      $('.header').addClass('hide');
      gnbFlag = true;
    } else {
      $('.header').removeClass('hide');
      if(!$('.header').hasClass('hide') && gnbFlag) {
        gnbActive.restart();
        gnbFlag = false;
      }
    }
    lastScroll = curr;
  }
})

스크롤을 내리면 헤더가 숨겨졌다가 스크롤을 올리면 다시 헤더가 보여지는 형식이다.
헤더가 보여질 때 마다 메뉴들이 하나씩 나타나게하는 효과를 넣어 주었다.

💣 문제점

구글에 서칭해서 찾아 구현은했으나 코드를 이해하기가 어려웠다.
또 스크롤을 올렸을 때 메뉴들이 하나씩 나타나는 효과가 한번만 실행되어야 하는데
올릴때마다 반복적으로 나타나는 문제점이 있었다.

💊 해결방법

현재스크롤 위치값이 50보다 클경우와 현재스크롤 위치값이 마지막스크롤 위치값보다 클경우
스크롤의 방향이 내려가는걸 의미 할 수있어서 헤더를 숨기게 처리하고
이때 gnbflag를 true로 실행했다는 의미로 상태를 바꿔준다.
그게 아니라면 헤더에 클래스값을 빼 다시 보이게 처리해준다.
근데 여기서 메뉴들이 하나씩 나타나게 한번만 실행해주려면
헤더에 hide클래스가 없거나 gnbflag가 true인지 확인해서
restart() 메서드를 이용해서 모션을 처리해주고 gnbflag를 false로 상태를 바꿔서
한번만 실행하게 처리해준다.

2. 마우스에 따라 움직이는 화살표

🔎 코드분석

<div class="btn next" data-mouse="">
  <span class="blind">다음</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.68 7.92">
    <path d="M11.18,4.46H.5a.5.5,0,0,1,0-1H11.18a.5.5,0,0,1,0,1Z"/>
    <path d="M7.72,7.92a.52.52,0,0,1-.35-.14.5.5,0,0,1,0-.71L10.48,4,7.37.85a.48.48,0,0,1,0-.7.5.5,0,0,1,.71,0l3.46,3.46a.5.5,0,0,1,0,.7L8.08,7.78A.54.54,0,0,1,7.72,7.92Z"/>
  </svg>
</div>
<div class="btn prev"  data-mouse="">
  <span class="blind">이전</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.68 7.92">
    <path d="M11.18,4.46H.5a.5.5,0,0,1,0-1H11.18a.5.5,0,0,1,0,1Z"/>
    <path d="M7.72,7.92a.52.52,0,0,1-.35-.14.5.5,0,0,1,0-.71L10.48,4,7.37.85a.48.48,0,0,1,0-.7.5.5,0,0,1,.71,0l3.46,3.46a.5.5,0,0,1,0,.7L8.08,7.78A.54.54,0,0,1,7.72,7.92Z"/>
  </svg>
</div>

$('[data-mouse]').mousemove(function(e){
  x = e.offsetX;
  y = e.offsetY;
  child = $(this).find('svg');
  gsap.to(child, {
    opacity: 1,
    x:x,
    y:y
  })
})
$('[data-mouse]').mouseout(function(){
  child = $(this).find('svg');
  gsap.to(child, {
    opacity: 0,
  })
})

버튼의 사이즈를 이전,다음이미지 사이즈에 맞게 영역을 같이 맞춰주고,
화살표(svg)는 opacity를 0을 줘서 안보이게 처리한다.
x, y변수에 offsetX값과 offsetY값을 담아주고
따라다닐 대상 화살표한테 모션을 줘서 x,y좌표 값에 x,y변수를 할당해주면
화살표의 마우스 좌표 위치를 반환해서 마우스를 움직일 때 마다 화살표가 따라다니게 된다.

offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다.
offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다.

3. 사선으로 나타나는 이미지

🔎 코드분석

 .img-box {
   position: relative;
   z-index: -1;
   width: 461px; height: 662px;
   overflow: hidden;
   transform: translateY(-100%);
   img {
     position: absolute;
     left: 0; top: 0;
     width: 100%; height: 100%;
     object-fit: cover;
     object-position: center;
     opacity: 1;
     transform: scale(1.2);
     transition: all 1s;
     clip-path: polygon(0 0, 50% 0, 21% 100%, 0% 100%);
     &.active {
       z-index: 1;
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     }
   }
 }

💣 문제점

아무리 생각해도 생각이 나지않았다...

💊 해결방법

생각보다 간단해서 놀랐다.
clip-path로 쉽게 처리할 수 있었다.
clip-path는 요소의 일부분을 잘라내주는 속성인데
이걸 이용해 사선모양의 잘라낼 좌표값을 넣어주고 active가 됐을 땐
잘라낸 사선의 좌표를 다시 원래의 좌표값으로 바꿔주면 된다.

좌표값을 수동으로 찾긴 힘들기 때문에 아래 사이트를 이용하면 쉽게 찾을 수 있다.
https://bennettfeely.com/clippy

4. 텍스트 무한 흐름처리

🔎 코드분석

//marquee
@keyframes textLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes reverseTextLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.marquee-list {
  overflow: hidden;
}
.marquee-item {
  display: flex;
  flex: 0 0 auto;
  padding: 10px 0;
  line-height: 1.2;
  white-space: nowrap;
  transition: 0.3s;
  .marquee {
    display: flex;
    gap: 124px;
    animation: textLoop 15s linear infinite;
    padding-right: 124px;
  }
  &.item2 {
    justify-content: flex-end;
    .marquee {
      animation: reverseTextLoop 20s linear infinite;
    }
  }
  &.item3 {
    .marquee {
      animation: textLoop 10s linear infinite;
    }
  }
}

💣 문제점

텍스트를 흐르게는 구현했으나 텍스트가 끊기는 듯한 현상이 일어났다.

💊 해결방법

animation을 부모인 .marquee-item한테 주니 끊기는 현상이 일어났던 것이다.
애니메이션 대상인 .marquee한테 줘야 끊기지않고 부드럽게 무한으로 흐르는 텍스트를 구현할 수 있다.

5. Swiper pagination 중복사용

🔎 코드분석

// news슬라이드
var newsSwiper = new Swiper(".news-slide", {
  spaceBetween: 80,
  slidesPerView: 'auto',
  speed: 1000,
  pagination: {
    el: ".fraction",
    type: "fraction",
  },
  navigation: {
    nextEl: ".next",
    prevEl: ".prev",
  },
});
// news 프로그래스바
var progressbar = new Swiper(".news-slide", {
  spaceBetween: 80,
  slidesPerView: 'auto',
  speed: 1000,
  pagination: {
    el: ".prograssbar",
    type: "progressbar",
  },
});
newsSwiper.controller.control = progressbar;

💣 문제점

처음에 newsSwiper함수에 pagination을 fraction타입과 prograssbar타입 둘 다 넣었더니
앞에있는건 무시되고 뒤에 있는것만 실행되었다.
swiper 페이징은 오직 하나의 타입밖에 설정할 수 없다.

💊 해결방법

Swiper함수를 새로 progressbar변수에 만들어서 newsSwiper에 있는 값을 넣고
pagination 요소 클래스와 타입에 progressbar를 넣어준다.
그리고 newsSwiper.controller.control = progressbar; 넣어주면
newsSwiper로 프로그래스바를 제어할 수 있다.

6. footer 숨었다가 보여지는 현상

🔎 코드분석

gsap.from('.footer .addr-area .inner', {
  scrollTrigger: {
    trigger: '.footer .addr-area',
    start: 'top 100%',
    end: 'bottom 100%',
    scrub: 0,
  },
  ease: 'none',
  opacity: 0,
  yPercent: -50,
})

💣 문제점

addr-area영역만 고정인줄 알고 position:fixed를 주고 z-index: -1을줬더니
addr-area영역이 사라지면서 스크롤이 되지 않아 볼 수 없었다..

💊 해결방법

position을 따로 주지않고 inner로 한번 더 감싸서
inner한테 opacity: 0, yPercent:-50 값을 주면 사라졌다가 보여지는
착시효과같은 느낌이었다.