Parallax background

Installation

Include JS

<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="jquery.min.js"></script>
<script src="parallax_background.js"></script>

Set HTML

<div class="parallax-background">
  <div class="parallax-inner" style="background-image: url('background-image.jpg')">
  </div>
</div>

Call the plugin

$(document).ready(function() {
  $('.parallax-background').parallaxBackground();
});

Demo

Basic usage

$('.parallax-demo-1').parallaxBackground();

Animation type - rotate

$('.parallax-demo-2').parallaxBackground({
  animation_type: 'rotate',
  zoom: 50,
  rotate_perspective: 500
});

Event - mouse move

$('.parallax-demo-3').parallaxBackground({
  event: 'mouse_move',
  animation_type: 'shift',
  animate_duration: 2
});

Event - mouse move with rotate animation

$('.parallax-demo-4').parallaxBackground({
  event: 'mouse_move',
  animation_type: 'rotate',
  animate_duration: 1,
  zoom: 70,
r otate_perspective: 1000
});

Alternative background type

$('.parallax-demo-5').parallaxBackground({
  event: 'mouse_move',
  animation_type: 'rotate',
  animate_duration: 1,
  zoom: 70,
  rotate_perspective: 1000
});