Skip to content
Create an interactive moving background/object that reacts to viewer's cursor
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Initial release Mar 30, 2014
LICENSE Initial commit Mar 30, 2014
README.md Initial release Mar 30, 2014
bg.jpg Initial release Mar 30, 2014
jquery.interactive_bg.js Initial release Mar 30, 2014
jquery.interactive_bg.min.js Initial release Mar 30, 2014

README.md

#Interactive BG (Background) by Pete R. A jQuery plugin that will let you create an interactive moving background/object that reacts to viewer's cursor Created by Pete R., Founder of Travelistly and BucketListly

License: Attribution-ShareAlike 4.0 International

Interactive BG (Background)

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE.

Basic Usage

To add a cool parallax like effect to your background, you will have to include the latest jQuery library (preferably version 2.0.0 or higher) together with jquery.interactive_bg.js into your document's <head>. Make sure you have a background image ready to be used.

Prepare your HTML as follows:

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

The data-ibg-bg attribute must reflect the location of the image you want to use as your background. For example, if your image is on the root folder and is called "background.png", change the attribute to "/background.png".

Now call the function as follows and your background will magically reacts to viewers cursor.

 $(".bg").interactive_bg({
   strength: 25,              // Movement Strength when the cursor is moved. The higher, the faster it will reacts to your cursor. The default value is 25.
   scale: 1.05,               // The scale in which the background will be zoomed when hovering. Change this to 1 to stop scaling. The default value is 1.05.
   animationSpeed: "100ms",   // The time it takes for the scale to animate. This accepts CSS3 time function such as "100ms", "2.5s", etc. The default value is "100ms".
   contain: true,             // This option will prevent the scaled object/background from spilling out of its container. Keep this true for interactive background. Set it to false if you want to make an interactive object instead of a background. The default value is true.
   wrapContent: false         // This option let you choose whether you want everything inside to reacts to your cursor, or just the background. Toggle it to true to have every elements inside reacts the same way. The default value is false
 });

Advanced Features

The problem with using options above is all your planets will look the same. To specify each of your planet's style, you can utilize the HTML markup I've provided:

Responsive Background

To make the background responsive to the windows width and height, make sure you add this snippet below the function call as follows:

  $(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()
	  })
	})

Accelerometer on Mobile

Since mouse event is not available on mobile, the plugin will automatically switch to react to the mobile's accelerometer instead without you having to do anything. Just call the function normally, and the plugin will detects and switch to the fallback automatically.

Now your background will have this interactive parallax effect like no other sites have for a minimal effort.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

  • Tutorial (Coming Soon)
You can’t perform that action at this time.