Component: Mouse Parallax Mouse reactive parallax movement

What the Mouse Parallax module does

This module moves elements based on the cursor position, creating a parallax effect.

• Smooth mouse-based parallax animation
• Adjustable sensitivity for X and Y axis
• Optional axis inversion
• Optional wrapper for container-based tracking

Basic usage

Add the attribute data-anim-mouse to any element.

<div data-anim-mouse></div>

Movement sensitivity

Control how strongly the element reacts to mouse movement.

• data-anim-mouse-cx — X axis sensitivity
• data-anim-mouse-cy — Y axis sensitivity

<div
	data-anim-mouse
	data-anim-mouse-cx="150"
	data-anim-mouse-cy="120">
</div>

Axis direction

You can invert the movement direction.

• data-anim-mouse-dxr — invert X axis
• data-anim-mouse-dyr — invert Y axis

<div
	data-anim-mouse
	data-anim-mouse-dxr
	data-anim-mouse-dyr>
</div>

Animation smoothness

Use data-anim-mouse-a to control animation speed.

<div
	data-anim-mouse
	data-anim-mouse-a="80">
</div>

Wrapper tracking

You can limit mouse tracking to a container using data-anim-mouse-wrapper.

<div data-anim-mouse-wrapper>

	<div data-anim-mouse></div>

</div>

Best practice for images

When applying parallax to images, make them slightly larger than their container to avoid visible gaps during movement.

img {

	width: 130%;
	height: 130%;

	top: -15%;
	left: -15%;

}

Download

Add beautiful interactive motion effects to your UI with a single attribute.