Simple and tiny jQuery plugin for Parallax effect.

This simple plugin is easy to use and with it you can create Parallax effect on any div you want, with as many layers as you want. There are several options (such as speed, zoom level, axis lock) with which you can adjust the plugin to your needs. Also, it is tiny - just 795 bytes gzipped or 1.59KB without gzip (minified version).

• Please see demo.html
• For live demo see JSFiddle

• jQuery 1.9.1+

• Include necessary JS files

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="path-to-file/CZ-Parallax_jQuery-min.js"></script>

• Description: Foreground image link. Only one image link is required.
• Data type: string
• Default value: none
• Required: yes
• Example value: https://somewebsite.com/someimage.png

• Description: Background image links. At least one is required, several can be added.
• Data type: array
• Default value: none
• Required: yes
• Example value: ['https://somewebsite.com/someimage.png', 'https://somewebsite.com/someimage2.png', 'https://somewebsite.com/someimage3.png']

• Description: Speed of image movement. Foreground and first background layer images will move in this speed, each additional background layer will move slower than the previous one.
• Data type: integer/float
• Default value: 1
• Required: no
• Example value: 1.2 || 3 || .7

• Description: Foreground image zoom. Zoom is useful when using image that covers the div, in order to cover whole div even when moving around.
• Data type: integer/float
• Default value: 1
• Required: no
• Example value: 1.2 || 3 || .7

• Description: Background layers image zoom. Zoom is useful when using image that covers the div, in order to cover whole div even when moving around.
• Data type: integer/float
• Default value: 1.05
• Required: no
• Example value: 1.2 || 3 || .7

• Description: Locking movement to only one axis. By default, it is unlocked - movement is available to both X and Y axis.
• Data type: string
• Default value: none
• Required: no
• Example value: 'x' || 'X' || 'y' || 'Y'

Example code:

    // Minimum setup with only required options
    $('#some-element').CZParallax({
        fg: 'https://somewebsite.com/foreground-image.png',
        bgs: ['https://somewebsite.com/background-image.png']
    });

    // Setup with all options set
    $('#some-element').CZParallax({
        fg: 'https://somewebsite.com/foreground-image.png',
        bgs: [
            'https://somewebsite.com/background-image.png',
            'https://somewebsite.com/background-image2.png',
            'https://somewebsite.com/background-image3.png'
        ],
        speed: 2.5,
        fgZoom: 1.1,
        bgZoom: 1.5,
        lock: 'x'
    });

The expandable plugin is licensed under the MIT License.

Copyright (c) 2019 Mirza Mašić