🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

CZ-Parallax is a small jQuery plugin that applies an interactive parallax effect to multiple foreground and background images on mouse movent.

parallax

Documentation

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ć


You May Also Like