React中平滑的鼠标移动触发的视差效果 - Just Parallax

Just Parallax是一个React组件，用于创建一个平滑的视差效果，对滚动或光标移动做出反应。

如何使用它

1.安装并导入Just Parallax包。

# Yarn
$ yarn add react-just-parallax

# NPM
$ npm i react-just-parallax

import { MouseParallax, ScrollParallax } from "react-just-parallax";

2. 将视差组件添加到应用程序中。

export const MyComponent = () => (
  <>
    <MouseParallax>
      <p>I'm reacting to mouse move</p>
    </MouseParallax>
    <ScrollParallax>
      <p>I'm reacting to scroll</p>
    </ScrollParallax>
  </>
);

3.可用的道具。

export interface MouseParallaxProps {
  strength?: number;
  children?: React.ReactNode;
  parallaxContainerRef?: React.MutableRefObject<any> | null;
  scrollContainerRef?: React.MutableRefObject<any> | null; //Should be passed if parallaxed element is situated in other scrollable HTML element
  shouldResetPosition?: boolean;
  enableOnTouchDevice?: boolean;
  lerpEase?: number;
  isAbsolutelyPositioned?: boolean;
  zIndex?: number | null;
  shouldPause?: boolean;
}

export interface ScrollParallaxProps {
  strength?: number;
  children?: React.ReactNode;
  scrollContainerRef?: React.MutableRefObject<any> | null;
  enableOnTouchDevice?: boolean;
  lerpEase?: number;
  isHorizontal?: boolean;
  isAbsolutelyPositioned?: boolean;
  zIndex?: number | null;
  shouldPause?: boolean;
}

预览

The postSmooth Mousemove Triggered Parallax Effect In React - Just Parallaxappeared first onReactScript.