❤️ A lightweight react component to add a mouse parallax effect to your website
一个轻量级的react组件，用于为您的网站添加鼠标视差效果。️

💚 Efficient and lag free animations optimized for performance
💚 针对性能优化的高效且无延迟动画

💙 Using react-spring under the hood for fluid animations
💙 在引擎盖下使用反作用力弹簧进行流体动画

🚀 Ready to use and provided with types
🚀 随时可用并提供类型

➔ The parallax effect creates the illusion of depth when the cursor moves inside a specified container. The child of the container which is farthest from the user moves at the slowest speed, while the nearest child moves at the fastest speed.
视差效果在光标在指定容器内移动时创建深度错觉。容器中距离用户最远的子容器以最慢的速度移动，而最近的子容器以最快的速度移动。
It uses the mouse cursor position on the container and creates the illusion of depth for the layers visible in the container. For example, your cursor enters the container and the layers start to move away or approach to the cursor.
它使用鼠标光标在容器上的位置，并为容器中可见的层创建深度错觉。例如，光标进入容器，图层开始远离或接近光标。

(Read more at https://smartslider3.com/blog/parallax-effect/)
(Read更多信息请访问https：//smartslider3.com/blog/billlax—effect/）

➔ An editable example can be found on CodeSandbox below.
可以在下面的CodeSandbox上找到一个可编辑的示例。

➔ npm 南普

npm install react-parallax-mouse

➔ yarn 斜纹纱

yarn add react-parallax-mouse

import { MouseParallaxContainer, MouseParallaxChild } from "react-parallax-mouse";

The library provides you with two components and one hook.
该库提供了两个组件和一个钩子。

➔ The main container in which the effect will take place. It provides a context for all of its children.
要发生效果的主要容器。它为所有儿童提供了一个环境。

➔ The layer component for the effect. It provides a container for all of its children, which will stay on the same layer. Only works within the MouseParallaxContainer component (as direct child or subchild).
默认效果的图层组件。它为所有子层提供了一个容器，这些子层将停留在同一层上。仅在组件内工作（作为直接子组件或子组件）。 MouseParallaxContainer

<MouseParallaxContainer globalFactorX={0.1} globalFactorY={0.1}>
  <MouseParallaxChild factorX={0.3} factorY={0.5}>
    <img src="example1.jpg" alt="" />
  </MouseParallaxChild>
  <MouseParallaxChild factorX={0.7} factorY={0.8}>
    <img src="example2.jpg" alt="" />
  </MouseParallaxChild>
</MouseParallaxContainer>

➔ A hook that gives you direct access to the underlying spring and its values. It can be used to create custom child components.
一个钩子，让你直接访问底层的spring及其值。它可用于创建自定义子组件。

const { x, y } = useParallaxOffset();

🚀 https://github.com/choozn

© Copyright 2022 - @choozn
© 2022—2022—2019版权所有