포트폴리오 Projects 만들기 | framer-motion(motion, useScroll, useTransform)

 

 

 

 

➜ header 시작

➜ header 완성

➜ intro

➜ About Me

➜ Projects

➜ Skills

➜ Experience

➜ Contact

➜ Footer

➜ Vercel 배포

 

 

 

export default function Project({
  title,
  description,
  moreDescription,
  tags,
  imageUrl,
  GithubUrl,
}: ProjectProps) {

 

이렇게 다양한 프로퍼티들을 데려와서~~

(정보들은 data.ts에 저장되어 있음)

 

 

 

  const ref = useRef<HTMLDivElement>(null);

 

useRef 훅을 사용해서 HTML 요소에 접근한다. 초기값은 null

 

 

 

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0 1", "1.33 1"],
  });

 

useScroll 훅을 사용해서 스크롤을 추척한다.

처음부터 끝까지

반응형

 

  const scaleProgess = useTransform(scrollYProgress, [0, 1], [0.8, 1]);
  const opacityProgess = useTransform(scrollYProgress, [0, 1], [0.6, 1]);

 

useTransform 훅을 사용해서 scrollProgress 값을 반환한다.

P는 0~1 사이 값일때 0.8~1 사이값을 가짐

Y는 0.6~1 사이값을 가진다.

 

컴포넌트 크기랑 투명도 조절을 위한 변수

 

 

 

 

return (
  <motion.div
    ref={ref}
    style={{
      scale: scaleProgess,
      opacity: opacityProgess,
    }}
    className="group mb-3 sm:mb-8 last:mb-0"
  >

 

참조를 설정하고

스크롤에 따라 투명도가 변하게.

 

 

 

    <ul className="flex flex-wrap mt-4 gap-2 sm:mt-auto">
      {tags.map((tag, index) => (
        <li
          className="bg-black/[0.7] px-3 py-1 text-[0.7rem] uppercase tracking-wider text-white rounded-full dark:text-white/70"
          key={index}
        >
          {tag}
        </li>
      ))}
    </ul>

 

 

map함수로 태그를 렌더링한다.