[💻] 실습 - 엔터프라이즈블록체인

📖 Overview

사이트명: 엔터프라이즈블록체인
작업 기간: 5일 소요
라이브러리: swiper, jQuery, gsap
유형: PC적응형, 클론 코딩
참여도: 100%

👀 Check-point

GSAP + ScrollTrigger를 활용한 애니메이션 구현
ScrollTrigger의 pin 속성
유연한 가로세로 스크롤, 콜백이벤트

---

📌 width값 고정

PC만 지원하도록 만들었기 때문에, 최소너비를 1300픽셀로 잡아주었다. 이때, 컨텐츠의 수평 스크롤영역 때문에 가로스크롤이 생길 위험을 낮추기 위해 overflow-x:hidden을 사용했다.

.wrap {
    position: relative;
    min-width: 1440px;
    overflow-x: hidden;
}

📌 pin 속성

스크롤 도중 특정 요소를 화면에 고정시키는 기능

✏ pin: true

gsap.to(".sc-box", {
  scrollTrigger: {
    trigger: ".box", // 고정할 타겟
    start: "top top", 
    end: "bottom top",
    pin: true, // 고정
    markers: true
  }
});

✅ pinSpacing

true → 기본값, 고정된 요소만큼 공간 확보
false → 고정이 될때 다른 요소들이 겹쳐 올라가거나 여백이 생길 수 있음, 없애고 싶을때 사용

// 가로스크롤 sc-possibility
    ScrollTrigger.create({
      animation:economyTl,
      // markers:true,
      trigger:'.sc-economy',
      start:'0 0',
      end:'+=1500',
      pin:true,
      scrub:0,
      invalidateOnRefresh:true,
      onEnter:function(){
        $('.sc-economy .card-item').addClass('blur')
        $('.sc-economy .arrow-area').addClass('on')
        },
        onEnterBack:function(){
        $('.sc-economy .arrow-area').addClass('on')
        },
        onLeave:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        },
        onLeaveBack:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        }
    })

영역에 들어갔을때 진행되도록 'onEnter'이벤트 사용

📌 이벤트 콜백 함수(Event Callback Functions)

특정 요소가 뷰포트(Viewport)에 진입하거나 벗어날 때 실행되는 이벤트이다.

ScrollTrigger.create({
  trigger: ".section",
  start: "top 80%",
  end: "bottom top",
  onEnter: () => console.log("들어옴"),
  onLeave: () => console.log("나감"),
  onEnterBack: () => console.log("뒤로 들어옴"),
  onLeaveBack: () => console.log("뒤로 나감"),
});

✅ onEnter: 요소가 처음 스크롤 다운하여 트리거 범위에 들어올 때 실행된다.
✅ onLeave: 요소가 스크롤 다운하여 트리거 범위에서 벗어날 때 실행된다.
✅ onEnterBack: 요소가 스크롤 업하여 다시 트리거 범위에 들어올 때 실행된다.
✅ onLeaveBack: 요소가 스크롤 업하여 트리거 범위를 벗어날 때 실행된다.

📌 공통요소

반복되는 카드형태의 UI에 공통 스타일을 적용

<section class="sc-economy">
  <div class="split-area">
     <h3 class="title">전통 금융에서<br>미래 금융으로.</h3>
		<ul class="card-list">
          <li class="card-item">
             <div class="title-box">
               <em class="title">전통자산</em>
               <div class="right">
               ...
             </div>
          </li>
          ...
</section>

📌 border-image

###border-image 속성을 사용하여 요소의 테두리에 그라데이션 이미지를 적용하는 코드입니다.
border-image-slice: 1;

border-image-slice는 border-image로 지정된 원본 이미지를 어떻게 자르고 테두리에 적용할지 제어하는 속성입니다.

📌 한 방향으로 계속 흘러가는 배너

한 방향으로 끝없이 흘러가는 배너는 keyframe을 활용해서 구현해주었다.

<ul class="banner-rolling">
  <li><span>JOIN <i>us</i></span></li>
  <li><span>JOIN <i>us</i></span></li>
  <li><span>JOIN <i>us</i></span></li>
  <li><span>JOIN <i>us</i></span></li>
  <li><span>JOIN <i>us</i></span></li>
  <li><span>JOIN <i>us</i></span></li>
  ...
</ul>

.sc-banner02 .banner-rolling {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-animation: banner2 30s linear infinite;
          animation: banner2 30s linear infinite;
}
@-webkit-keyframes banner2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

이번 프로젝트는 가로를 잡는 오류가 많이 나서 따로 벨로그에 정리해 두었다!
정말..잊지 못할 ScrollTrigger였다..
-> pin으로만 모든걸 해결하려고 해서 오류가 많이 났던것! 해결방안 다시 정리!!

---

사이즈를 축소해보니 오류 발견🤔

100%일땐 높이가 100vh로 잘 잡혔는데 줄이니 자동으로 잡아주지 않는다.
-> 적응형으로 작업했기 때문에 ScrollTrigger에게 자동 높이 계산 코드를 넣어주지 않았기 때문!

3가지 해결방안
1. invalidateOnRefresh: true
2. pinSpacing: true
3. sticky사용하기

before을 이용해서 흰배경을 주었더니 확대시 오류발생
border-image를 이용하기!

1. border-left: 0;
왼쪽을 없애주면 해결!

적응형이지만 화면이 줄어들시 여백 발생🤔
문제1 가로스크롤이 width값 못잡음
-> width: max-content; or width: 100%
문제2 마지막 스크롤 뒤에 여백생김

기존코드

 .to('.sc-economy .split-area',{
        x: function() {
            return -economyWidth;
          },
          ease: "none",
          duration:4
    },'z')

.split-area를 (전체 카드 너비 - 뷰포트 너비) 만큼만 이동시켜야 하는데,
-economyWidth는 한 화면 더 많이 이동해버리는 셈

수정코드

economyTl
    .to(".sc-economy .split-area",{
        xPercent:-100,
        x:"100vw",
        duration:4
    },'z')

xPercent: -100
=> .split-area 전체 너비의 100%만큼 왼쪽으로 이동
하지만 상대이동이라 자기 너비만큼 움직이기 때문에 화면에 딱 맞지 않을수있다.
x: "100vw"
여기에 추가로 화면 너비만큼 오른쪽으로 이동
즉, 위에서 너무 많이 밀린 걸 한 화면 만큼 다시 앞으로 당긴 효과
ex) -300vw + 100vw = -200vw

✍ gsap pin은 만능이 아니다!
sticky를 사용했다면 더 빠르고 쉽게 사용할 수 있었다!
gsap 사용전 더 쉬운 방법 생각해보고 들어가기