masicmirza / Cz Parallax
Licence: mit
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Cz Parallax
Paroller.js
Parallax scrolling jQuery plugin
Stars: ✭ 535 (+5250%)
Mutual labels: jquery-plugin, parallax, jquery
Parallax background
jQuery parallax background plugin based on GSAP
Stars: ✭ 30 (+200%)
Mutual labels: jquery-plugin, parallax, jquery
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✭ 670 (+6600%)
Mutual labels: jquery-plugin, jquery
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✭ 679 (+6690%)
Mutual labels: jquery-plugin, jquery
Printthis
jQuery printing plugin; print specific elements on a page
Stars: ✭ 902 (+8920%)
Mutual labels: jquery-plugin, jquery
Inputtounsi
A jQuery plugin for entering and validating Tunisian users' data or any other data. It is made very easy to use and easier to customize
Stars: ✭ 25 (+150%)
Mutual labels: jquery-plugin, jquery
Jquery Smartwizard
The awesome jQuery step wizard plugin
Stars: ✭ 635 (+6250%)
Mutual labels: jquery-plugin, jquery
Jquery Powertip
💬 A jQuery plugin that creates hover tooltips.
Stars: ✭ 822 (+8120%)
Mutual labels: jquery-plugin, jquery
Jquery Drawsvg
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✭ 759 (+7490%)
Mutual labels: jquery-plugin, jquery
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✭ 724 (+7140%)
Mutual labels: jquery-plugin, jquery
Push State
Turn static web sites into dynamic web apps.
Stars: ✭ 16 (+60%)
Mutual labels: jquery-plugin, jquery
Form2js
Javascript library for collecting form data
Stars: ✭ 630 (+6200%)
Mutual labels: jquery-plugin, jquery
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✭ 646 (+6360%)
Mutual labels: jquery-plugin, jquery
Jcanvas
A jQuery plugin that makes the HTML5 canvas easy to work with.
Stars: ✭ 612 (+6020%)
Mutual labels: jquery-plugin, jquery
Stupid Table Plugin
A stupidly small and simple jQuery table sorter plugin
Stars: ✭ 704 (+6940%)
Mutual labels: jquery-plugin, jquery
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (+7790%)
Mutual labels: jquery-plugin, jquery
Bootstrap Fileinput
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Stars: ✭ 5,097 (+50870%)
Mutual labels: jquery-plugin, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (+6980%)
Mutual labels: jquery-plugin, jquery
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
- 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
bgs
- 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']
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ć
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].