스크롤을 내렸을 때는 header에 배경을 주고싶고 지정한 높이 이상 올라가면 다시 투명색을 주고싶습니다
근데 첫화면 렌더링시에만 투명색이고 다시 올려도 계속 색이 그대로네요ㅜㅜ
깃헙 :
https://github.com/beom-jun-kim/beeflix
// header.tsx
Copy
const { scrollY } = useScroll();
// variants
const navVars = {
top: {
backgroundImage: "linear-gradient(180deg,rgba(0,0,0,.7) 10%,transparent)",
},
scroll: {
background: "rgba(0,0,0,1)",
},
};
// scroll 감지
useMotionValueEvent(scrollY, "change", () => {
if (scrollY.get() > 80) {
navAnimation.start("scroll");
} else {
navAnimation.start("top");
}
});
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2년 전
src/Components/Header.tsx
Copy
const navVars = {
top: {
background: "rgba(0,0,0,0)",
backgroundImage: "linear-gradient(180deg,rgba(0,0,0,.7) 10%,transparent)",
},
scroll: {
background: "rgba(0,0,0,1)",
},
};답변에 대한 댓글 1개
2년 전
다음과 같은 방법도 있으니 참고해 보세요
Copy
import { useMotionValue } from 'framer-motion';
const scrollY = useMotionValue(0); // scrollY를 useMotionValue로 선언
// variants
const navVars = {
top: {
background: "rgba(0,0,0,0)", // 초기 배경
},
scroll: {
background: "rgba(0,0,0,1)",
},
};
// scroll 감지
useMotionValueEvent(scrollY, "change", () => {
if (scrollY.get() > 80) {
navAnimation.start("scroll");
} else {
navAnimation.start("top");
}
});
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.