Create an Interactive Moving Background or Object that Reacts to Viewer’s Cursor

Parallax comes in many forms. The most common one is a parallax effect that reacts to the user’s scroll behavior. Today, I have decided to experiment on a different kind of parallax effect that reacts to cursor movement and mobile accelerometer instead.

Introducing Interactive BG (Background), a plugin that will let you create an interactive background or any element on the page that reacts to your cursor movement. Since there’s no mouse movement event on mobile, this plugin will utilize the accelerometer instead to create a parallax effect on iOS and Android.

Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop. This has not been tested on IE.

Create an Interactive Moving Background/Object that Reacts to Viewer's Cursor


How to Use Interactive BG

How does this work?

The concept is to apply the image as a background and move the background position according to the cursor’s position on mouseover. First I began experimenting with a function that moves the background position, but it creates a little jaggedness in the animation when the cursor enters the image and the background position needs to be reset to be moved. This is not a good user experience so in the end, I decided to use CSS3’s transform matrix, which allows me to move the background relative to the center coordinate without having to calculate it myself. Another benefit of using matrix is that I can also apply the scale and the position all in one go without having to call and animate multiple values.

After I had completed a test on the desktop, I realized that this will not work on mobile because there are no mouse events on smartphones and tablets, so instead of not supporting mobile, I decided to experiment on the new JS event called “devicemotion” which let me determine the state of the accelerometer. After a few trials and errors, I was able to convert the “accelerationIncludingGravity” value into a usable data for my CSS3’s matrix transformation.

Now your background will have a beautiful parallax effect that reacts to both the mouse cursor and the mobile devices’ accelerometer.

How-Tos

First and foremost, make sure you’ve included the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jQuery.interactive_bg.js which can be found here, in to your document’s <head>. Make sure you have a background image in place so that you can reference it in your code to be used as an interactive background.

Now, let’s begin laying the markup:

HTML

<body>
  ..
  <div class="bg" data-ibg-bg="bg.jpg"></div>
  ..
</body>

Make sure you switch the data-ibg-bg attribute with the location of your prepared background image. For example, if your image is in the root folder and is called "background.png", change the attribute to ”/background.png".

Now, you can call the function as follows and your background will spring to life.

JS

$(".bg").interactive_bg({
   strength: 25,
   scale: 1.05,
   animationSpeed: "100ms",
   contain: true,
   wrapContent: false
 });

With the options above, your background will be scaled slightly on mouse over (to prevent the user from seeing the out-of-bounds area) and will react to the cursor, creating a subtle parallax effect. These options are of course not set in stone, so let’s explore what you can do with these options:

  • strength: This option will let you control the background movement strength when the cursor is moved. The higher the value, the faster and easier the cursor moves the background. The default value is 25.
  • scale: You can set the scale to which the background will be zoomed when on mouse hover. The option accepts the normal CSS scale value so 1 means original scale which will disable the scaling animation on entrance and on exit. The default value is 1.05.
  • animationSpeed: You can define the time it takes for the scaling entrance and exit to be animated. The option accepts the CSS duration such as “100ms” or “2.5s”. The default value is “100ms”.
  • contain: If you set the scale to be higher than 1, this option, when set to true, will prevent the enlarged objects/background from spilling out of its container. Set this to false if you want the scaled content to spill out. The default value is true.
  • wrapContent: This option lets you choose whether you want every element inside the defined container to react to your cursor, or just the background. Toggle it to true to have every element inside react the same way. The default value is false.

Advanced Features

Responsive Background
To get the most out of this plugin, you can utilize this extra snippet to create a responsive interactive background that will resize with your browser’s width and height. To do that, add the code below right after you call the function:

JS

$(document).ready(function(){
    $(".bg").interactive_bg(); // function call
});

  // change background size on window resize
  $(window).resize(function() {
      $(".bg > .ibg-bg").css({
        width: $(window).outerWidth(),
        height: $(window).outerHeight()
      })
   })

Interactive Background with Accelerometer
The good thing about this plugin is that you don’t have to do anything. The plugin will automatically detect when to apply the accelerometer effect instead of the traditional mouse events using data such as the availability of the accelerometer events and the screen size. Try the demo on your smartphone and see for yourself.

Conclusion

Now your background will have this interactive parallax effect like no other for a minimal effort. I hope you will find this plugin useful.

If you have any questions or a suggestions, feel free to let me know in the comments below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.