🎮 OUTFIT7

개인프로젝트

사이트명: OUTFIT7

작업 기간: 7일 소요

#gsap #canvas

유형: 인터렉티브한 pc 사이트

특징: canvas 와 gsap을 사용한 모션 적용

‼️작업 목표

• 인터렉티브! 인터렉티브! 인터렉티브!

📍POINT

1. :not 선택자
2. canvas를 활용한 배경 이미지 변경하기
3. Text split
4. Gsap 스크롤 이벤트

💡How to study?

GSAP 사용법 알아보기

---

1. :not 선택자

hover 시, 선택하고 싶은 항목을 제외한 나머지의 색상을 유지.

header .gnb-item:hover a{color: #fff;}

//선택항목에 :hover 를 적용해 주고//

header .gnb-list:hover .gnb-item:not(:hover){color: rgba(242, 242, 242, 50%);}

//상위 클래스에 :hover 적용 후, 비선택 항목에 :not 선택자를 적용시켜 :hover 를 제외해 준다.

2. canvas를 활용한 배경 이미지 변경하기

뒷 배경의 이미지가 스크롤을 할 때마다 점점 변경되는 효과를 주고 싶었다!

다행히 outfit 페이지의 개발자 모드에서 분리된 배경 이미지를 얻을 수 있었다.
(이렇게 하나하나 쪼개진 이미지가 240장 사용되었다...!)

    const canvas = document.querySelector('#downloads-bg'); 
	//캔버스 영역 선택
    const ctx = canvas.getContext('2d');
	// 2d로 지정

    canvas.width = 1440;
    canvas.height = 1181;

    const frameCount = 240; //이미지 총개수


   
	//padStart (3 = 세자리 (240) ,
    const currentFrame = (idx) => {
      return `https://outfit7.com/img-sequence/desktop/desktop_${idx.toString().padStart(3, '0')}.png`;  
    }; // 리턴 필수

    const images = [];
    const card = {
      frame: 0,
    };
	
	// 반복문 사용하여 불러오기
	// i < frameCount 일 때 i 증가시키기
 	//이미지 미리 불러오기 (이미지가 로드되며 깜빡이는 효과가 없게끔)
    for (let i = 0; i < frameCount; i++) {
      const img = new Image();
      img.src = currentFrame(i + 1);
      images.push(img);
    }

	//Gsap 스크롤트리거를 통해 스크롤 영역 잡아주기
    gsap.to(card, {
      frame: frameCount - 1,
      snap: 'frame',
      ease: 'none',
      scrollTrigger: {
        trigger: '.sc-downloads .sticky-area',
        scrub: 1,
        start: '0% 0%', 
        end: '100% 100%',
        // markers:true,
      },
      onUpdate: render,
    });

    images[0].onload = render;

    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(images[card.frame], 0, 0);
    }
    

3. Text split

스크롤을 할 때마다 텍스트 색상이 하나씩 채워지는 효과를 만들고 싶었다!

	//SplitType.js 파일을 불러와 글자를 하나하나 쪼개주었다
    const downloadsText = new SplitType('.sc-downloads .slide-text .text-box span', { types: 'words, chars', });


    // timeline -> 시간순서대로 실행시켜주는것 모션을 다함께 써줄수있다.
	//타임라인을 통해 스크롤에 따른 텍스트의 위치 설정과 색상 변경을 적용!

    const textMotion = gsap.timeline({
      scrollTrigger:{
        trigger: '.sc-downloads .sticky-area',
        start:"0% 0%",
        end:"100% 100%",
        // markers:true,
        scrub: 1,
      },
    })

    textMotion.addLabel('a')
    textMotion.to('.sc-downloads .slide-text',{ 'padding-top':73, },'a')
    textMotion.to('.sc-downloads .slide-text .text-box .char',{color:'#fff', stagger:0.1 },'a') 
	// stagger를 통해 글씨 색상을 순차적으로 변경 시켜주기
    textMotion.to('.sc-downloads .bg-color',{yPercent:-100},'a')

4. Gsap 스크롤 이벤트

스크롤에 맞춰 샤라락 커지고 등장하는 역동적인 모션!

gsap 스크롤 트리거 + 타임라인을 사용해 만든 모션.

추가 공부 자료 :
https://velog.io/@oneuya/GSAP-사용법-알아보기

    const hyperdotMotion =  gsap.timeline({
      scrollTrigger:{
        trigger: '.sc-hyperdot .hyper-inner',
        start:"0% 0%",
        end:"80% 100%",
        // markers:true,
        scrub: 1,
      },
    })

    hyperdotMotion.to('.sc-hyperdot .bg-blue',{
      scale:6
    }) //파랑색 동그라미가 배경을 꽉 채우게 스케일 키우기
    hyperdotMotion.to('.sc-hyperdot .card-list',0.4,{
      scale:1,
      opacity:1,
    }) //아래의 카드 뉴스의 불투명도가 조절되며 올라오기