react-mouse-parallax

Parallax on mouse movement on react - simple

To do this, you just need to download this library.

<Parallax move={{
    top: 10,
    left: 3,
    type: "%"
}}>
    <img src="/file.png" />
</Parallax>

The Parallax component is required to place the animation element. In the move argument, you must pass an offset from top, bottom, left, or right (or a combination). You must also specify the type (in pixels or percentages). Now the mouse will move when moving. If there are errors, write.

const ref = useParallax({
    bottom: 10,
    right: 5,
    type: "px"
})

You can also use the useParallax hook instead of a component. Next, you need to attach the reference to the desired block.

Example: https://github.com/KirillUsenko/examples-react-mouse-parallax

Параллакс при движении мыши на реакте - просто

Для этого нужно всего лишь скачать данную библиотеку.

<Parallax move={{
    top: 10,
    left: 3,
    type: "%"
}}>
    <img src="/file.png" />
</Parallax>

Нужно внутрь компонента Parallax вместить элемент для анимации. В аргумент move нужно передать смещение сверху, снизу, слева или справа (или совмещать). Также надо указать тип смещения (в пикселях или в процентах). Теперь при движении мыши элементы будут двигаться. Если будут ошибки, то пишите.

const ref = useParallax({
    bottom: 10,
    right: 5,
    type: "px"
})

Также вместо компонента вы можете использовать хук useParallax. Далее нужно референс прикрепить к нужному блоку.

Пример: https://github.com/KirillUsenko/examples-react-mouse-parallax

Donate

if you like the library, you can buy it on privjs.
https://app.privjs.com/my-package?pkg=react-mouse-parallax
Well, or you can throw money on the card 2200 7005 0030 3994)