jQuery Parallax Background Plugin by Eren Süleymanoğlu
Switch branches/tags
Nothing to show
Clone or download

README.md

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