728x90

[효과 설명]

상하 슬라이드 -> 슬라이드01~03(좌우 슬라이드) -> 상하 슬라이드 -> 슬라이드01~03(좌우 슬라이드)

*PIN 메서드를 사용하여 제작

 

 

[코드]

#html

<body>
      <div class="section green">
        <h2>메인 페이지 입니다.</h2>
      </div>

      <!--  좌우 슬라이드 01 -->
      <div class="section container">
        <div class="section pin blue">
          <!-- 첫 페이지 텍스트만 돌아가는 효과 class -->
          <h2 class="first">슬라이드 01</h2>
        </div>
        <div class="section pin gray">
          <h2>슬라이드 02</h2>
        </div>
        <div class="section pin green">
          <h2>슬라이드 03</h2>
        </div>
        <div class="section pin purple">
          <h2>슬라이드 04</h2>
        </div>
      </div>

      <!-- 중간 상하 슬라이드 -->
      <div class="section green final">
        <h2>중간 페이지 입니다.</h2>
      </div>
      
      <!-- 좌우 슬라이드 02 -->
      <div class="section container">
        <div class="section pin blue">
           <!-- 첫 페이지 텍스트만 돌아가는 효과 class -->
          <h2 class="first">슬라이드 01</h2>
        </div>
        <div class="section pin gray">
          <h2>슬라이드 02</h2>
        </div>
        <div class="section pin purple">
          <h2>슬라이드 03</h2>
        </div>
      </div>

      <div class="section green final">
        <h2>마지막 페이지 입니다.</h2>
      </div>
        <!-- gsap 플러그인 연결 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js "></script>
        <!-- Lenis 스크롤 플러그인 연결 -->
        <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
        <!-- 메인 js -->
        <script src="js/main.js"></script>
    </body>

 

#CSS

* {
  margin: 0;
  padding: 0;
  font-family: "SebangGothic", sans-serif;
  font-weight: 400;
  letter-spacing: -0.05rem;
  box-sizing: border-box;
}
/*  각 슬라이드 색상으로 구별*/
.green{background-color: green;}
.blue{background-color: blue;}
.gray{background-color: gray;}
.purple{background-color: purple;}

.container{display: flex; flex-wrap: nowrap; overflow: hidden;}
/* 색션  */
.section{width: 100%; height: 100vh; position: relative; z-index: 10;}
/*  상하 슬라이드 색션 : 좌우보다 높게 설정하여 위로 올라오게 (z -index : 20) */
.final{z-index: 20;}
/*  좌우 슬라이드 색션 : 가로로 길게 설정*/
.pin{display: flex; flex: 1 0 100%; justify-content: center; align-items: center; font-size: 35px;}

 

flex-grow 속성

속성값 : 0 이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지

속성값 : 1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.

 

flex-shrink 속성

flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 기본값은 1이다.

속성값  : 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지된다.

속성값 : 1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.

 

 

flex-basis 속성

flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.

width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용할 수 있다. 

flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정된다.

 

 

flex: 1 1 0 ( = flex: 1)의 의미

flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex: 1 속성은 flex: 1 1 0 속성을 의미한다. 즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다.

 

JS

GSAP + Lenis(smooth scroll) 플러그인 같이 사용

*Lenis 자세한 내용은 블로그 [Lenis 개념정리] 포스트 참

// gsap  + lenis 같이 사용
const lenis = new Lenis({
  duration: 2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),   // 묵직한 스크롤 효과
});

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
});

gsap.ticker.lagSmoothing(0)

 

// gsap 플러그인 적용
gsap.registerPlugin(ScrollTrigger);
// container 안 요소르  배열로 만든다.
const containers = gsap.utils.toArray(".container"); 

containers.forEach((cont, i) => {
  const { innerHeight } = window; // 화면 네이비이션 창 제외 안쪽 창 영역의 높이
  const slides = gsap.utils.toArray(".pin", cont); //  slides : .pin class 요소들을 배열로 만든다.
  const marginValue = innerHeight * slides.length; // 슬라이더 높이 x 슬라이드 개수(4)
  const firstText = slides[0].querySelector(".first"); // slides 배열 안 첫번째 요소의  .first 클라스

  gsap.set(cont, {marginBottom: marginValue}); // 슬라이드 높이 만큼 밑에있는 상태

  ScrollTrigger.create({
    trigger: cont,
    start: "top top",
    end: "max",
    pin: true, // 트리거 고정
    pinSpacing: false, // 핀 지정 간격 자동
    markers: true
  });

  gsap
    .timeline({
      scrollTrigger: {
        trigger: cont,
        start: "top top",
        end: "+=" + (marginValue + innerHeight), // 끝나는 지점 : 모든 슬라이드 높이값
        scrub: 1.5, // 스크롤 속도
        markers: true
      }
    })
  .addLabel("C")
  .to(slides, {xPercent: - (100 * (slides.length - 1)), duration: slides.length, ease: "power4.out"}, "C+=1") //  - 왼쪽으로 이동  100% * 슬라이드 마지막까지 슬라이드 배열 길이 동안
  .to(firstText, {duration: 1, rotation: 360, opacity:0, color: "Red", ease: "none"}, "C");
});

 

 

 

 

 

728x90

'GSAP' 카테고리의 다른 글

[GSAP] barba.js 개념정리/문법  (0) 2024.07.22
[GSAP] 개념/메서드 정리  (0) 2024.06.27

티스토리툴바