在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 (将#修改为@）

javascript parallax reactjs reactjs