포트폴리오 header 만들기 | motion 리액트 라이브러리 hash 속성

 

 

 

 

➜ header 시작

➜ header 완성

➜ intro

➜ About Me

➜ Projects

➜ Skills

➜ Experience

➜ Contact

➜ Footer

➜ Vercel 배포

 

 

<motion.div>

<motion.div
    className="fixed top-0 left-1/2 -translate-x-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full"
    initial={{ y: -100, x: "-50%", opacity: 0 }}
    animate={{ y: 0, x: "-50%", opacity: 1 }}
  ></motion.div>

 

 

initial: 초기 상태를 정의.
{ y: -100, x:"-50%", opacity : 0 }y 값으로 -100, x 값으로 -50%, 그리고 투명도(opacity) 값으로 0으로 설정.
이렇게 설정하면 요소가 화면 위로 위치하고 왼쪽에서 시작하여 완전히 투명한 상태로 시작.

animate: 애니메이션 실행 시 최종 상태를 정의.
{ y: 0, x:"-50%", opacity : 1 }
애니메이션이 실행되면 요소는 아래로 이동하며(y 값으로 0) 가운데 정렬된 위치에 유지(x 값으로 -50%)).
동시에 투명도(opacity)가 변화하여 완전히 불투명한 상태(opacity 값으로 1)로 나타남.

 

 

반응형

 

<nav>

<nav className="fixed top-[0.15rem] left-1/2 h-12 -translate-x-1/2 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0">
        <ul className="flex w-[22rem] flex-wrap items-center justify-center gap-y-1 text-[0.9rem] font-medium text-gray-500 sm:w-[initial] sm:flex-nowrap sm:gap-5">
          {links.map((link) => (
            <motion.li
              className="h-3/4 flex items-center justify-center"
              key={link.hash}
              initial={{ y: -100, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
            >
              <Link
                className="flex w-full items-center justify-center px-3 py-3 hover:text-gray-950 transition"
                href={link.hash}
              >
                {link.name}
              </Link>
            </motion.li>
          ))}
        </ul>
      </nav>

 

links.map() 메서드를 사용하여 links 배열을 순회하면서 각 링크를 렌더링한다.

 

초기 상태(initial)에서는 y 값으로 -100, 투명도(opacity) 값으로 0으로 설정.
애니메이션이 실행되면 최종 상태(animate)로 y 값은 0, 투명도(opacity) 값은 1로 변화한다.

마지막으로 <Link> 컴포넌트를 사용하여 각 링크의 내용을 나타내고 클릭 가능한 링크로 만든다.