parallax-background.js
jQuery Parallax Background Plugin by Eren Süleymanoğlu
https://erensuleymanoglu.github.io/parallax-background/
Installation
Download and include parallax-background.min.js in your document after including jQuery.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="/path/to/parallax-background.min.js"></script>Usage
To easily add a parallax effect to an element, add following lines between your <script> tags:
<script> (function ($) { $('.your-class').parallaxBackground(); })(jQuery); </script>Options
Options can be passed in via data attributes of JavaScript. For data attributes, append the option name to data-, as in data-parallax-bg-image="".
Note that when specifying these options as html data-attributes, you should convert "camelCased" variable names into "dash-separated" lower-case names.
(e.g. parallaxSpeed would be data-parallax-speed="").
| Name | Type | Default | Description |
|---|---|---|---|
| parallaxBgImage | path | null | You must provide a path to the image you wish to apply to the parallax effect. |
| parallaxBgPosition | string | center center | You can provide css background-size property. The parallax image will be positioned as close to these values as possible while still covering the target element. Available options: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom |
| parallaxBgRepeat | string | no-repeat | You can provide css background-repeat property. The parallax image will be repeated as you provided. Available options: repeat, repeat-x, repeat-y, no-repeat |
| parallaxBgSize | string | cover | You can provide css background-size property. The parallax image will be sized as you provided. Available options: auto, contain, cover |
| parallaxSpeed | float | 0.5 | The speed at which the parallax effect runs. 0 means the image will appear fixed in place, and 1 the image will flow at the same speed as the page content. Available options: float value between 0 and 1 |
| parallaxDirection | string | up | You can provide direction for your parallax effect. Available options: up, down, left, right |
License
parallax-background.js is proudly sponsored by VigitalArt and released under MIT License
