我正在做一个Reaction项目，我想在其中创建一种效果，当用户向下滚动页面时，圆形背景元素会放大.但是，我也希望在这个圆形背景中保留一个固定大小的图像.从本质上讲，圆圈会变大，但图像大小保持不变.
以下是我为该组件编写的当前代码:
import React, { useEffect, useState } from "react";
import PersonImg from "../assets/person.png";
import Image from "next/image";
const CircleScroll = () => {
const [scaleFactor, setScaleFactor] = useState(1);
// Update the scale factor based on the scroll position
const handleScroll = () => {
const scrollY = window.scrollY;
const newScaleFactor = 1 + (scrollY / window.innerHeight) * 30;
if (newScaleFactor <= window.innerWidth / 70) {
setScaleFactor(newScaleFactor);
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div
className="grow-element flex justify-center items-center relative"
style={{ transform: `scale(${scaleFactor})` }}
>
<Image
className="w-[100px] h-[100px] fixed top-0"
src={PersonImg}
alt="person-image"
width={"100"}
height={"100"}
/>
</div>
);
};
export default CircleScroll;
和css
width: 150px;
height: 150px;
background-color: #FFE67B;
border-radius: 50%;
position: fixed;
bottom: 0;
transform: translate(-50%, -50%);
transition: transform 0s ease-in-out;
z-index: -10;
border-radius: 50%;
}
When I scroll the page, the background element gets bigger but along with that the image too. I want the image to be fixed at the top of the element without increasing it's size. Any help on this would be appreciated. I've also attached the image if it looks confusing.
