react-stickyroll
react-stickyroll copied to clipboard
How to use Parallax Effect on my project in stickyroll
Hello, I am not finding any documentation for using Parallax Effect. I am see parallax effect in this example -https://stickyroll.github.io/react-stickyroll/#!/device-support/1
Can you give any work example or codeSandBox example-
This is my using-
const headlines = [
<Stack direction="row">
<Box>
<Typography variant="h6" component="h6">
Requirements
</Typography>
<Typography variant="body1" component="p">
We are a remote developer agency based in Bangladesh,
working with clients around the world. As passionate designers & developer, we love building website, mobile app and UI/UX that are easy to use, accessible, engaging, and delightful.
</Typography>
</Box>
<Box sx={{ svg: { width: "100px" } }}>
<ReactSVG src={Requirement} wrapper="span" />
</Box>
</Stack>,
<Stack direction="row">
<Box>
<Typography variant="h6" component="h6">
Hello world
</Typography>
<Typography variant="body1" component="p">
We are a remote developer agency based in Bangladesh,
working with clients around the world. As passionate designers & developer, we love building website, mobile app and UI/UX that are easy to use, accessible, engaging, and delightful.
</Typography>
</Box>
<Box sx={{ svg: { width: "100px" } }}>
<ReactSVG src={Requirement} wrapper="span" />
</Box>
</Stack>,
]
const Process = () => {
return (
<Container id="process" maxWidth={false} component="section" disableGutters>
<Stickyroll pages={headlines} factor={0.5}>
{({ pageIndex }) => {
return (
<div>
<h1>{headlines[pageIndex]}</h1>
</div>
);
}}
</Stickyroll>
</Container>
);
};
export default Process;
The source for the github page can be found here: https://github.com/stickyroll/react-stickyroll/blob/master/app/app.tsx