💻 HYBE coding

사이트명 : HYBE
사용언어 : html / scss / js
분류 : 적응형 PC / 반응형

🎈 HYBE HOMEPAGE
https://hybecorp.com/kor/company/artist

Check Point

• loading-page
• text-animation
• gsap - scrollTrigger

1. loading-page

🎈 기본원리
: gsap플러그인을 사용하여, 순차적인 애니메이션을 구현함

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"></script>

✍🏻 코드작성

<div id="loading">
  <div class="loading-txt">
      <div class="wrap">
        <span class="first">H</span>
        <span class="sec">Y</span>
        <span class="sec">B</span>
        <span class="sec">E</span>
      </div>
  </div>
</div>

1. text가 순차적으로 나와야하기 때문에, wrap으로 전체를 묶어 위치를 잡아주고 class명을 다르게 주었다.

.wrap{
        overflow: hidden;
        padding: 0 10px;
        transform: translateX(20%);
    }
    span{
        font-size: 15vw; 
        font-weight: 900;
        color: $color-main;
        display: inline-block;
        transform: translateY(100%);
    }

2. gsap.timeline적용
   : 로딩페이지 이벤트 후, 사라지면서 아래의 visual이 나타남

✍🏻 코드작성

const intro = gsap.timeline({ 
        defaults:{
        },
        onComplete:function(){ 👈🏻 완료된후에
            scaleIntro.play();
        }
    })
    intro
    .addLabel('a')
    .to('#loading .first',1,{yPercent: -95},'a')
    .to('#loading .sec',1,{yPercent: -95, stagger:0.1},'a+=0.2')
    .to('#loading .wrap',0.5,{xPercent:-20},'a+=0.5')
    .to('#loading',1,{height:0})

    const scaleIntro = gsap.from('.sc-visual .visual-bg img',0.5,{
        scale:1.2,
        paused:true,
    })

✔ gsap.timeline : gsap를 한꺼번에 묶어 순차적으로 실행하는 메서드
✔ addLabel : gsap를 그룹으로 묶어, 동시에 애니메이션 적용하는 메서드

2. text-animation

🎈 기본원리
: 아래동영상을 참고하여 코드적용

👇🏻 구현해야되는 모습
: text-in과 text-out으로 컨트롤하여 계속 롤링되게 하여야함

✍🏻 코드작성

<div class="visual-content">
   <h2 class="title">
       <div class="title-list">
          <span class="title-item">BTS</span>
          <span class="title-item">LEE HYUN</span>
          <span class="title-item">LE SSERAFIM</span>
          <span class="title-item">NewJeans</span>
          <span class="title-item">SEVENTEEN</span>
          <span class="title-item">ENHYPEN</span>
          <span class="title-item">TXT</span>
       </div>
       HYBE ARTIST
   </h2>                
</div>

1. 변수선언

const txts = document.querySelector('.title-list').children;
txtsLen = txts.length;
let index = 0;

2. for반복문('text-in', 'text-out')
   

function aniMate1() {
    for (let i = 0; i < txtsLen; i++) {
        txts[i].classList.remove('text-in', 'text-out');
    }
    txts[index].classList.add('text-in');
}
function aniMate2() {
    txts[index-1].classList.add('text-out');
}

3. setInterval() 적용
   ✍🏻 setTimeout / setInterval 차이점
   setTimeout() : 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우에 사용
   setInterval() : 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

setInterval(function () {
    aniMate2()
}, 3500);

setInterval(function () {
    if (index == txtsLen - 1) {
        index = 0;
    }
    else {
        index++;
    }
    aniMate1()
}, 3000);

3. gsap - scrollTrigger

🎈 기본문법
: 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과가 목적

scrollTrigger:{
	trigger:"기준이될태그",
	start:"top top", 👈🏻 기준태그의 시작지점, 윈도우기준 시작지점 
	end:"bottom top" 👈🏻 기준태그의 끝지점, 윈도우기준 끝지점
	markers:true, 👈🏻 인디케이터를 표시
	scrub:1 👈🏻 되감기(스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능) 
}

👇🏻 구현해야되는 모습

1. GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현
   : 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현

const viewSlide = gsap.timeline({
                defaults:{
                    ease:'none',
                },
                scrollTrigger:{
                    trigger:'.sc-view',
                    start:'top top',
                    end:'+=800%', 👈🏻 값이 클수록 스크롤이 천천히됌
                    scrub:1,
                    markers:true, 👈🏻 시작과 끝위치 확인
                    pin:true, 👈🏻 고정
                },
            })

2. gsap.set({})기초셋팅

gsap.set('.sc-view .img-item .item01',{ scale:1.3 })
            gsap.set('.sc-view .img-item .item02',{ rotate:30, })
            gsap.set('.sc-view .img-item .item03',{ rotate:-10,scale:0.8 })
            gsap.set('.sc-view .img-item .item05',{ rotate:-50,scale:1.5 })
            gsap.set('.sc-view .img-item .item05',{ scale:1.1 })
            gsap.set('.sc-view .img-item .item07',{ rotate:-120})
            gsap.set('.sc-view .img-item .item08',{ rotate:20,scale:1.2 })
            gsap.set('.sc-view .img-item .item09',{ rotate:45})
            gsap.set('.sc-view .img-item .img',{ yPercent:-50})

3. .addLabel('a')로 그룹으로 효과적용

.addLabel('a')
            .to('.sc-view .title',{ xPercent:-20 },'a')
            .to('.sc-view .img-item',{ xPercent:-110 },'a')
            .to('.sc-view .img-item .img',{ yPercent:100, stagger:0.02 },'a')
            .to('.sc-view .img-item .item01',{ rotate:-90 },'a')
            .to('.sc-view .img-item .item02',{ rotate:0 },'a')
            .to('.sc-view .img-item .item03',{ rotate:0 },'a')
            .to('.sc-view .img-item .item04',{ rotate:60 },'a')
            .to('.sc-view .img-item .item05',{ rotate:0 },'a')
            .to('.sc-view .img-item .item06',{ rotate:30 },'a')
            .to('.sc-view .img-item .item07',{ rotate:0 },'a')
            .to('.sc-view .img-item .item08',{ rotate:0 },'a')
            .to('.sc-view .img-item .item09',{ rotate:0, left:'100px', bottom:'-150px' },'a+=.1')

객체의 위치를 잡는게 point였다.

Issue Point

• 영역안에서 mousemove/mouseout
• GSAP ScrollTrigger - 3D Transforms

1. 영역안에서 mousemove/mouseout

🎈 기본원리

[참고사이트]
https://zzzmh.tistory.com/13

👇🏻 구현해야되는 모습

✍🏻 코드작성

function menuOpen() {
    var target = document.querySelector('.menu');
    var motion = document.querySelector('.open-btn');
    target.addEventListener('mousemove', (event) => {
        let x = (event.layerX * 0.1);
        let y = (event.layerY * 0.1);

        motion.style.transform = `translate(${x}px,${y}px)`
    })
    target.addEventListener('mouseout', (event) => {
        motion.style.transform = '';
    })
}

✔ MouseEvent.layerX읽기 전용 속성: 현재 레이어를 기준으로 이벤트의 수평 좌표를 반환
✔ MouseEvent.layerY읽기 전용 속성: 현재 레이어를 기준으로 이벤트의 수직 좌표를 반환

👉🏻 마우스 이벤트가 발생할 때 마우스 포인터의 x 좌표에 대한 정수 값이 나옴

2. GSAP ScrollTrigger - 3D Transforms

🎈 기본원리
[참고사이트]
https://codepen.io/jonathan/pen/XXdNjR
👇🏻 구현된 모습


1. transform-origin속성적용

<h2 class="title">
  <span class="effect"><span class="em-txt">HYBE</span> is committed to satisfying</span>
  <span class="effect">customers  with the 'content' leading the</span>
  <span class="effect"><span class="em-txt">global trend and our 'fans'</span></span>
</h2>
.title{
    transform-origin: top left;
}

<span class="effect"> 👈🏻 효과를 주기위해 class명을 넣어줌

[참고사이트]
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

2. 스크립트 작성

gsap.set(".sc-intro .effect", { 👈🏻 기초셋팅
        rotationX: -45,
        transformStyle: "preserve-3d",
        transformOrigin: "0% 50% -100%",
        opacity: 0,
        yPercent: 110,
    });

    const introEffect = gsap.to('.sc-intro .effect', {
        scrollTrigger:{
            trigger:'.sc-intro',
            start:'top 50%',
            end:'bottom top',
        },

        transformStyle: "preserve-3d",
        rotationX: 0,
        duration:1,
        opacity: 1,
        yPercent: 0,
        transformOrigin: "50% 50%",
        stagger:0.1,
    });

3. css에 perspective(원근감)추가

perspective: 400px;

✔ 부모에게 perspective 속성을 주고, 이벤트 대상에는 transform을 시킨 모습
✔ 여기에서의 400px은 '내가 얼마나 떨어져서 보고 있는가'를 나타낸다고 할 수 있음
✔ 값이 작으면 작을 수록 더 가까이에서 보는 것으로 처리
[참고사이트]
https://nykim.work/26