How to create mousemove parallax effects using HTML CSS & Javascript ? (original) (raw)

Last Updated : 23 Jul, 2025

In this article, we will learn to create a Mousemove parallax effect using CSS and JavaScript. In the Mousemove parallax effect, an image moves in a different direction at a different speed when we move the cursor. Parallax effects are used to make the website more attractive and increase the interactivity level of the website. The parallax effect is a way to scroll or move the foreground & background images at different speeds in different directions. We can use either of the combination ie, a text with an image or an image with an image, to create the parallax effect.

**Approach:

• In the tag, create a
  tag to assign some images on which the parallax effect is to be applied, and assign a class name and value attribute to each image that is responsible for the amount of shifting of the image.
• For the CSS stylings, add some CSS properties in the style tag such as position and size of images.
• We have taken the help of JavaScript to implement the parallax effect. In the snippet given under the script tag, we have created a function parallax that uses the class name of the img tag to get the value for positioning and shifting purposes.

**Example: In this step, we willcreate a movemouse parallax effect using the above approach.

HTML ``