Skip to content

Simple and tiny jQuery plugin for Parallax effect.

License

Notifications You must be signed in to change notification settings

masicmirza/CZ-Parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CZ-Parallax jQuery Plugin

Simple and tiny jQuery plugin for Parallax effect.

Description

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).

Demo

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

Requirements

  • jQuery 1.9.1+

Installation

  • 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>

Options

fg

bgs

speed

  • 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

fgZoom

  • 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

bgZoom

  • 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

lock

  • 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'

Usage

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'
    });

License

The expandable plugin is licensed under the MIT License.

Copyright (c) 2019 Mirza Mašić