Skip to content

gfazioli/mantine-parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mantine Parallax Component

image


Latest Stable Version   NPM Downloads   License

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

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';

Usage

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>
  );
}