This component is created on top of the Mantine library.
Despite the Parallax
component allowing you to create the famous Apple TV Card effect, you can use this component to manipulate the perspective and rotation of an element. It is also possible to act on the skew of the element and disable the parallax effect when hovering with the mouse.
You can find more components on the Mantine Extensions Hub library.
npm install @gfazioli/mantine-parallax
or
yarn add @gfazioli/mantine-parallax
After installation import package styles at the root of your application:
import '@gfazioli/mantine-parallax/styles.css';
import { Parallax } from '@gfazioli/mantine-parallax';
function Demo() {
return (
<Parallax w={560} h={300}>
<Title>Parallax</Title>
<Text>
Amazing contentParallax effect component. Hover to see the effect.
</Text>
</Parallax>
);
}