Mantine Parallax

Undolog

@gfazioli/mantine-parallax

A Mantine component that allows you to create the famous Apple TV parallax effect.

Version
v2.0.2
Changelog
View the Changelog
Source
View source code
Package
@gfazioli/mantine-parallax
See More
Mantine Extensions
Docs
Edit this page
Built by
Giovambattista Fazioli (@gfazioli)
License
MIT

Installation

yarn add @gfazioli/mantine-parallax

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

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

You can import styles within a layer @layer mantine-parallax by importing @gfazioli/mantine-parallax/styles.layer.css file.

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

Usage

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. See Initial values and Skew below.

The disabled prop allows you to disable the effect. Both perspective and initialPerspective props will be disabled if the value is greater or equal to 10000.

Norway

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Perspective
Initial perspective
Initial rotation x
Initial rotation y
Initial rotation z
Initial skew x
Initial skew y
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {
  return (
    <Center w="100%" h={500}>
      <Parallax  lightEffect lightOverlay w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Initial values and Skew

You can set the initial rotation of the card using the initialPerspective, initialRotationX, initialRotationY, and initialRotationZ props. You may also use the initialSkewX and initialSkewY props to set the initial skew of the card.

Norway

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Perspective
Initial perspective
Initial rotation x
Initial rotation y
Initial rotation z
Initial skew x
Initial skew y
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {
  return (
    <Center w="100%" h={500}>
      <Parallax  initialPerspective={10000} initialRotationX={60} initialSkewX={-30} initialSkewY={30} lightEffect lightOverlay w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Scroll

The initial values of the Parallax component can be set based on the scroll position. You can use the useWindowScroll() hook to get the scroll position and pass it to the Parallax component.

Norway

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

import { Parallax } from '@gfazioli/mantine-parallax';
import { useWindowScroll } from "@mantine/hooks";

function Demo() {
  const [scroll] = useWindowScroll();

  return (
    <Center w="100%" h={500}>
      <Parallax {...props} initialRotationX={(scroll.y - 4400) / 10} w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Simple usage

Below a super simple example of how to use the Parallax component.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax w={300} h={200}>
        <Title>Parallax</Title>
        <Text>
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Parallax Effects

In addition to the classic Apple TV Card effect, you can use the Parallax component to create a parallax effects both for the background and for the content. You may use the backgroundParallax and backgroundParallaxThreshold props to enable and manage the parallax effect.

Background

Here is an example of the parallax effect used for the background.

Perspective
Initial perspective
Initial rotation x
Initial rotation y
Initial rotation z
Initial skew x
Initial skew y
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
Background parallax threshold
import { Parallax } from '@gfazioli/mantine-parallax';
function Demo() {
  return (
    <Center w="100%" h={400}>
      <Parallax
        lightEffect
        lightGradientType="linear"
        lightGradientAngle={-120}
        backgroundParallax
        backgroundParallaxThreshold={1}
        w={400}
        h={300}
        backgroundImage="https://picsum.photos/500/400?random=2"
      />
    </Center>
  );
  );
}

Content

Of course, you can also use the parallax effect for the content. You may use the contentParallax and contentParallaxDistance props to enable and manage the parallax effect.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

Perspective
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
Content parallax distance
import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax  contentParallax contentParallaxDistance={1} w={300} h={200} p={16} bg="dark.5">
        <Title c="gray.2">Parallax</Title>
        <Text c="yellow.5">
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Complex Example

Below a more complex example of how to use the Parallax component.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

Perspective
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
Background parallax threshold
Content parallax distance
import { Parallax } from '@gfazioli/mantine-parallax';
function Demo() {
  return (
    <Center w="100%" h={300} bg="dark.7">
      <Parallax
        lightEffect
        backgroundParallax
        backgroundParallaxThreshold={1}
        contentParallax
        contentParallaxDistance={1}
        w={400}
        h={200}
        p={16}
        backgroundImage="https://picsum.photos/id/352/500/400"
        style={{
          borderRadius: "16px",
          border: "1px solid #666",
        }}
      >
        <Title c="gray.2">Parallax</Title>
        <Text c="gray.2" fw="bold">
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Shadow

Give free rein to your creativity. You can use the Parallax component to create shading effects.

Parallax

Amazing parallax effect component. Hover to see the effect.

Perspective
Threshold
Light intensity
Light size
Light color
Light gradient type
Light gradient angle
Background parallax threshold
Content parallax distance
import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax  backgroundParallax backgroundParallaxThreshold={1} contentParallax contentParallaxDistance={4} p={32} bg="tomato">
        <Box
          w={300}
          h={200}
          style={{
            position: "absolute",
            boxShadow: "0 0 12px rgba(0, 0, 0, 1)",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            borderRadius: "16px",
          }}
        />
        <Paper w={300} h={200} bg="gray.9" radius={16} p={16}>
          <Title c="white">Parallax</Title>
          <Text c="white">
            Amazing parallax effect component. Hover to see the effect.
          </Text>
        </Paper>
      </Parallax>
    </Center>
  );
}