ZARA 리뉴얼 코딩

💻 ZARA 리뉴얼 코딩

• 사이트: ZARA
• 사용언어: HTML, CSS, Jquery, gsap
• 분류: 적응형 PC, 리뉴얼 코딩

---

📌 KEY POINT

• 텍스트 animation에서의 오류
• gsap
• 마우스커서 커스텀

1. 텍스트 animation

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
   100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.sc-main h2{
  font-family: 'silk';
  font-size: 22vw;
  line-height: 18vw;
  animation: fadeInUp 1s linear;
}

※ 애니메이션을 처음으로 줬을 당시 끊기는 느낌이 있었는데 그 이유가 gsap이 들어가는 부분에 애니메이션을 줬기 때문이었다. 그렇기 때문에 @keyframes을 통한 애니메이션을 줄 경우에는 반드시 부모에게 애니메이션을 줘야한다.

2. gsap

💚 마우스를 따라 원 움직이게 하기

// jquery

$('.sc-video .mouse-pos').mousemove(function(e){
  x = (e.offsetX - (window.innerWidth/2))/10; -> 2를 나누는 이유는 
  윈도우 절반을 줘야 중앙으로 좌표가 잡히기 때문이다.
  y = (e.offsetY - (window.innerHeight/2))/10;
  gsap.to('.sc-video .group-video',{
    x:x,
    y:y
  })
})

• offsetX, offsetY: 좌표를 출력하도록 하는 이벤트가 걸려있는 DOM를 기준으로 좌표를 표시한다. 위에 코드처럼 '.sc-video .mouse-pos'에 offset을 넣었다면 기준은 '.sc-video .mouse-pos'이 될 것이다.

• clientX, clientY: 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시하는 것을 말한다. 따라서, 스크롤바가 움직이더라도, 특정 지점의 값은 동일하다.

• pageX, pageY: 전체 문서를 기준으로 한 좌표를 표시합니다.

• screenX, screenY: 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다.

💚 글씨와 이미지가 동시에 애니메이션 되게 하기

  gsap.utils.toArray('.hori-text').forEach(element => {
    var xVal = element.dataset.x;
    var childEl = element.children[1].children[0];
    horimotion = gsap.timeline({
      scrollTrigger: {
        trigger: '.sc-text',
        start: "0% 50%",
        scrub:1,
      },
    })
    horimotion
    .addLabel('a')
    .to(element, { xPercent:xVal },'a')
    .to(childEl, { scale:1.8, },'a')
  });

• gsap.utils.toArray(): gsap에서 제공하는 문법으로 자바스크립트나 제이쿼리에 each랑 같다.
• gsap.timeline(): 시간 순서대로 애니메이션을 주고 싶을 때 사용한다.
• scrub: 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능을 말한다.
• addLabel(): 두 애니메이션을 동시에 시작하게 되게 하고싶을 때 사용한다.

3. 마우스커서 커스텀

💚 마우스커서 커스텀

// css
.cursor{
    position: fixed;
    top: 0;left: 0;
    width: 5px;height: 5px;
    background: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    z-index: 99;
}
.cursor.point{
    width: 10px;
    height: 10px;
    filter: blur(0)!important;
}

• pointer-events: element가 어떤 상황에서 포인트 이벤트의 대상이 될 수 있는지 지정하는 기능을 말한다.
• backdrop-filter: 요소 뒤 영역에 그래픽 효과를 넣고 싶을 때 사용.
• filter: 시각적인 효과를 주고싶을 때 사용한다.
• mix-blend-mode: 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법을 정의하는 것으로 서로 다른 요소를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용한다.