How to Create a Moving Background Image with jQuery Mousemove Event?

Estimated read time 3 min read

To create a moving background image with jQuery mousemove event, you can use the CSS background-position property and the jQuery mousemove event to update the position of the background image based on the position of the mouse. Here are the basic steps you can follow:

  1. Create an HTML div element with a unique ID that will serve as the container for the background image.
  2. Set the background-image property of the container to the image you want to use as the background.
  3. Use CSS to position the background image and set its size and repeat behavior as needed.
  4. Use jQuery to attach a mousemove event listener to the window object.
  5. In the event listener function, use the pageX and pageY properties of the event object to calculate the new position of the background image.
  6. Use the css() method in jQuery to update the background-position property of the container to the new position of the background image.

Here’s an example code snippet that demonstrates how to create a simple moving background image with jQuery mousemove event:

<html>
<head>
    <title>Moving Background Image with jQuery Mousemove Event</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #background-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://source.unsplash.com/random/1600x900');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div id="background-container"></div>
    <script>
        $(window).mousemove(function(event) {
            var xPos = (event.pageX / $(window).width()) * 100;
            var yPos = (event.pageY / $(window).height()) * 100;
            $('#background-container').css('background-position', xPos + '% ' + yPos + '%');
        });
    </script>
</body>
</html>

In this example, we have created a div element with the ID background-container that will serve as the container for the background image. We have used CSS to position the background image and set its size and repeat behavior.

We have used jQuery to attach a mousemove event listener to the window object using the $(window) selector. In the event listener function, we have used the pageX and pageY properties of the event object to calculate the new position of the background image.

We have used the css() method in jQuery to update the background-position property of the container to the new position of the background image based on the position of the mouse.

As the user moves the mouse, the jQuery function updates the position of the background image, creating a moving background effect. You can customize the behavior and appearance of your moving background image by modifying the HTML, CSS, and JavaScript code as needed.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply