[라온] 홍보 프로젝트 개발 - intro 페이지

홍보 사이트 제작 2일차

- 2022.12.20 화

 

- intro 페이지 화면 구성

- 스크롤 이벤트

 

[시도한 것]

1. div 영역의 레이아웃 grid로 설정 

 .container {

      display: grid;

      place-items: center;

      height: 100vh;

      max-width: 100%;

      position: relative;

    }

 

2. 텍스트 그라데이션

#raon{

       

         

        background: -webkit-linear-gradient(-70deg,#e23a3a97 40%,orange 60%,rgba(233, 242, 102, 0.859)90% );

        -webkit-background-clip: text;

        background-clip: text;    

        -webkit-text-fill-color: transparent;    

        font-weight: 900;

        font-size:150px;

        text-align: center;

        -webkit-text-stroke:0px;

         

     

     }

 

3. 스크롤 애니메이션

// IMAGE ANIMATION

   

      let revealCallback = (entries) => {

        entries.forEach((entry) => {

          let container = entry.target;

   

          if (entry.isIntersecting) {

            console.log(container);

            container.classList.add("animating");

            return;

          }

   

          if (entry.boundingClientRect.top > 0) {

            container.classList.remove("animating");

          }

        });

      };

   

      let revealObserver = new IntersectionObserver(revealCallback, options);

   

      document.querySelectorAll(".reveal").forEach((reveal) => {

        revealObserver.observe(reveal);

      });

 

 

<완성샷>

 

 

 

[리팩토링 필요]

1. 스크롤을 하면 header 클릭이 되지 않음.