JSPM – parallax_background@1.0.9

Package Exports

parallax_background

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (parallax_background) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

parallaxBackground

Demo

https://lemehovskiy.github.io/parallax-background

Package Managers

# NPM
npm install 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

<script type="text/javascript">
    $(document).ready(function() {
      $('.parallax-background').parallaxBackground();
    });
</script>

In result

<html>
  <head>
  <title>My website</title>
  </head>
  <body>

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

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

  <script type="text/javascript">
      $(document).ready(function() {
        $('.parallax-background').parallaxBackground();
      });
  </script>

  </body>
</html>

Data Attribute Settings

In parallaxBackground you can add settings using the data-parallax-background attribute. You still need to call $(element).parallaxBackground() to initialize parallaxBackground on the element.

Example:

<div class="parallax-background" data-parallax-background='{"duration": 3, "zoom": 30}'>
  <div class="parallax-inner" style="background-image: url('background-image.jpg')">
  </div>
</div>

Settings

Option	Type	Default
event	string	scroll
animation_type	string	shift
zoom	int	20
rotate_perspective	int	1400
animate_duration	int	1

Browser support

Chrome
Firefox
Opera
IE10/11

Dependencies

jQuery 1.7
Gsap