react-stickyroll icon indicating copy to clipboard operation
react-stickyroll copied to clipboard

How to use Parallax Effect on my project in stickyroll

Open siamahnaf opened this issue 4 years ago • 1 comments

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;

siamahnaf avatar Jan 03 '22 11:01 siamahnaf

The source for the github page can be found here: https://github.com/stickyroll/react-stickyroll/blob/master/app/app.tsx

pixelass avatar Jan 04 '22 13:01 pixelass