Simple Parallax Background by Eren Süleymanoğlu

parallax-background.js is a background scrolling effect which is designed for you to create beautiful and smooth parallax websites. Enjoy, it's so simple!

Download View on GitHub

What is parallax-background.js?

This plugin is made for you to create parallax scrolling effects behind the elements. It simply creates an <div> tag inside your elements and uses CSS3 3D Transforms property in order you to see a smooth parallax effect underneath.

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

Like it? Then follow me!

GitHub About.me Twitter