Mantine Parallax Component

---

Overview

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.

Installation

1npm install @gfazioli/mantine-parallax

or

1yarn add @gfazioli/mantine-parallax

After installation import package styles at the root of your application:

1import '@gfazioli/mantine-parallax/styles.css';

Usage

1import { Parallax } from '@gfazioli/mantine-parallax';
2
3function Demo() {
4
5  return (
6    <Parallax w={560} h={300}>
7        <Title>Parallax</Title>
8        <Text>
9          Amazing contentParallax effect component. Hover to see the effect.
10        </Text>
11    </Parallax>
12  );
13}