我正在嘗試使用樣式化的組件制作類似這樣的滾動影片并做出反應。我的策略是減小 transform: scale(1) 的值，這樣當用戶向下滾動時，影像的寬度和高度就會減小，并獲得類似的效果。為此，我需要訪問該屬性并在函式中使用它，然后在 useEffect 掛鉤中使用它。我檢查了樣式化組件的檔案，但我想我遺漏了一些東西。這是代碼：
const AnimationImg = styled.img.attrs((props) => ({ src: props.src }))`
position: absolute;
top: 0;
object-fit: cover;
transform: scale(1);
transform-origin: 49% 50%;
`;
const Animation = () => {
//Scroll positionu yakalamami sagliyor.
const [scrollPosition, setScrollPosition] = useState(0);
const [zoom, setZoom] = useState(1);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
const handleZoom = () => {
if (scrollPosition >= 2000 && handleScroll) {
// function here
}
};
縮放邏輯：
const handleZoom = () => {
if (scrollPosition >= 2000 && handleScroll) {
setZoom(zoom - 0.001);
}
};
uj5u.com熱心網友回復：
由于zoom是從scrollPosition狀態派生的，因此您可以在組件呈現時重新計算它，并將其作為道具傳遞給樣式化的組件。在比例內使用插值來使用zoom.
const AnimationImg = styled.img`
position: absolute;
top: 0;
object-fit: cover;
transform: scale(${({ zoom }) => zoom});
transform-origin: 49% 50%;
`;
const Animation = () => {
const [scrollPosition, setScrollPosition] = useState(0);
const zoom = scrollPosition >= 2000 ? zoomFunction(scrollPosition) : 1;
useEffect(() => {
const handleScroll = () => {
setScrollPosition(window.pageYOffset);
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<AnimationImg zoom={zoom} />
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/482672.html