如何解决在React.js中滑动菜单以显示视差背景图像
我正在尝试创建一个菜单,该菜单在打开时会显示页面的背景图像。背景图像必须是视差图像,因此,如果用户在菜单打开时滚动,则可以看到背景图像以较低的速度滚动。
菜单基本上应该像X射线一样工作,因为只要单击它,它就会显示隐藏的背景图像。
使用本教程https://github.com/TheClosure/parallax-tutorial.,我设法在整个背景上获得了视差。但它适用于整个页面
到目前为止,这是我所拥有的。https://anandogs.github.io/solitude-react/(请注意,请在检查模式下将其视为移动设备。因为我是为移动设备而设计的,所以我也希望在台式机版本中也具有此功能。虽然)
const SolitudeMenu = () => {
return {
position: 'fixed',left: '0',top: '12vh',width: '50vw',height: '80vh',backgroundColor: 'green',color: '#445641',fontFamily: 'monotype-grotesque,sans-serif',fontSize: '.75rem',textTransform: 'uppercase',transform: open ? 'translateX(0)' : 'translateX(-100%)',transition: 'transform 0.3s ease-in-out',
const [open,setopen] = useState(false)
return (
<div className='header-style'>
<div className='burger' onClick={() => setopen(!open)}>
<FontAwesomeIcon icon={fagripLines} />
</div>
视差代码
const [offsetVerticalScroll,setoffsetVerticalScroll] = useState(0);
const handleScroll= () => setoffsetVerticalScroll(window.pageYOffset);
useEffect(() => {
window.addEventListener('scroll',handleScroll);
return () => window.removeEventListener("scroll",handleScroll);
},[]);
return (
<div>
<Header />
<div className="parallax-bg"style = {{ transform: `translateY(${offsetVerticalScroll * 0.5 }px)` }}/>
视差css
.parallax-bg {
width: 100%;
height: 400vh;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
background-image: url('images/background.jpg');
z-index: -1;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。