Interactive Parallax Background Image with jQuery and CSS3 - Interactive BG

File Size: 502 KB
Views Total: 6440
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Interactive Parallax Background Image with jQuery and CSS3 - Interactive BG

A simple and fast interactive background image parallax effect that moves in response to the mouse, built with jQuery and CSS3 transitions & transforms. License under the GNU General Public License v3.0.

See also:

How to use it:

1. Include the jQuery Interactive BG plugin and other resources in your Html file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.interactive_bg.js"></script>

2. Create an DIV element with a CSS class of 'bg' and a data-ibg-bg attribute specifying the background image source.

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

3. Call the function and make the background image responsive by adding the resize function as follows.

<script>
$(document).ready(function(){
$(".bg").interactive_bg();
});
		
$(window).resize(function() {
$(".bg > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
		
</script>

4. Available options.

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

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.