tgomilar / Paroller.js
Licence: mit
Parallax scrolling jQuery plugin
Stars: ✭ 535
Projects that are alternatives of or similar to Paroller.js
Parallax background
jQuery parallax background plugin based on GSAP
Stars: ✭ 30 (-94.39%)
Mutual labels: jquery-plugin, parallax, jquery
Jquery Scrolllock
Locks mouse wheel scroll inside container, preventing it from propagating to parent element
Stars: ✭ 109 (-79.63%)
Mutual labels: jquery-plugin, scrolling, jquery
Cz Parallax
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10 (-98.13%)
Mutual labels: jquery-plugin, parallax, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (+32.34%)
Mutual labels: jquery-plugin, scrolling, jquery
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (-20.75%)
Mutual labels: plugin, jquery-plugin, jquery
Sticky Sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
Stars: ✭ 2,057 (+284.49%)
Mutual labels: jquery-plugin, scrolling, jquery
Jquery Lockfixed
jQuery lockfixed plugin
Stars: ✭ 69 (-87.1%)
Mutual labels: jquery-plugin, scrolling, jquery
Convform
A jQuery plugin that transforms a form into an interactive chat.
Stars: ✭ 141 (-73.64%)
Mutual labels: plugin, jquery-plugin, jquery
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (-79.63%)
Mutual labels: plugin, jquery-plugin, jquery
Jquery.localscroll
Animated anchor navigation made easy with jQuery
Stars: ✭ 624 (+16.64%)
Mutual labels: plugin, scrolling, jquery
Footer Reveal
A jQuery plugin for easy implementation of the 'fixed/reveal' footer effect. Demo here:
Stars: ✭ 111 (-79.25%)
Mutual labels: plugin, jquery-plugin, jquery
Sidr
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Stars: ✭ 2,924 (+446.54%)
Mutual labels: plugin, jquery-plugin, jquery
Jquery Cropper
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516 (-3.55%)
Mutual labels: jquery-plugin, jquery
Jquery Loading
Easily add and manipulate loading states of any element on the page.
Stars: ✭ 321 (-40%)
Mutual labels: jquery-plugin, jquery
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+535.89%)
Mutual labels: jquery-plugin, jquery
Tilt.js
A tiny 60+fps parallax tilt hover effect for jQuery.
Stars: ✭ 3,442 (+543.36%)
Mutual labels: parallax, jquery
Jquery Fullscreen Plugin
This jQuery plugin provides a simple to use mechanism to control the new fullscreen mode of modern browsers
Stars: ✭ 327 (-38.88%)
Mutual labels: jquery-plugin, jquery
Zoomove
🔍 🎆 Enlarges the image with the mouse hover and move
Stars: ✭ 339 (-36.64%)
Mutual labels: plugin, jquery
Material Cards
Card style based on Google Material color palette
Stars: ✭ 370 (-30.84%)
Mutual labels: jquery-plugin, jquery
paroller.js
A lightweight jQuery plugin that enables parallax scrolling effect
- You can use it on elements with background property or on any other element
- While scrolling elements can move: vertical, horizontal
- Manipulated through html data-* attributes or jQuery options
- Mobile ready
- Easy to use
DEMO: Demo, Example page, Example page
Install
Before closing </body>
element include:
npm
$ npm install paroller.js
Yarn
$ yarn add paroller.js
Bower
$ bower install paroller.js
CDN
Use
//a) initialize paroller.js
$('.my-paroller').paroller();
//b) initialize paroller.js and set attributes
$(".my-element").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'foreground', direction: 'horizontal' });
<!-- a) select element and set attributes -->
<div class="my-paroller"
data-paroller-factor="0.4"
data-paroller-factor-xs="0.2"
data-paroller-factor-sm="0.3"
data-paroller-type="foreground"
data-paroller-direction="horizontal"
>
<!-- b) select element -->
<div class="my-element"></div>
npm and browserify
require('paroller.js');
Options
data attributes
You can control parallax effect by data-paroller-* or jQuery values.
data-paroller-* | jQuery | value | default value |
---|---|---|---|
data-paroller-factor | factor | number (+/-) | 0 |
data-paroller-factor-xs | factorXs | number (+/-) | 0 |
data-paroller-factor-sm | factorSm | number (+/-) | 0 |
data-paroller-factor-md | factorMd | number (+/-) | 0 |
data-paroller-factor-lg | factorLg | number (+/-) | 0 |
data-paroller-type | type | background, foreground | background |
data-paroller-direction | direction | vertical, horizontal | vertical |
data-paroller-transition | transition | CSS transition | transform 0.1s ease |
data-paroller-factor
Sets speed and distance of element's parallax effect on scroll. Value can be positive (0.3) or negative (-0.3). Less means slower. Different sign (+/-) means different direction (up/down, left/right).
⚠️ Since factor is multiplier it must be set for paroller.js to have parallax effect.
data-paroller-factor-*
Sets paroller factor for selected breakpoint.
data-paroller-factor-* | jQuery option | window width breakpoint | |
---|---|---|---|
Extra small | data-paroller-factor-xs | factorXs | <576px |
Small | data-paroller-factor-sm | factorSm | <=768px |
Medium | data-paroller-factor-md | factorMd | <=1024px |
Large | data-paroller-factor-lg | factorLg | <=1200px |
Extra Large | data-paroller-factor-xl | factorxl | <=1920px |
data-paroller-transition
Only effects elements with paroller.js type set to foreground!
JavaScript
// initialize paroller.js and set attributes for selected elements
$(".paroller, [data-paroller-factor]").paroller({
factor: 0.2, // multiplier for scrolling speed and offset, +- values for direction control
factorLg: 0.4, // multiplier for scrolling speed and offset if window width is less than 1200px, +- values for direction control
type: 'foreground', // background, foreground
direction: 'horizontal', // vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
});
Set factor breakpoints
// initialize paroller.js and set attributes for selected elements
$(".paroller, [data-paroller-factor]").paroller({
factor: 0.3, // +/-, if no other breakpoint factor is set this value is selected
factorXs: 0.1, // factorXs, factorSm, factorMd, factorLg, factorXl
factorSm: 0.2, // factorXs, factorSm, factorMd, factorLg, factorXl
factorMd: 0.3, // factorXs, factorSm, factorMd, factorLg, factorXl
factorLg: 0.4, // factorXs, factorSm, factorMd, factorLg, factorXl
factorXl: 0.5 // factorXs, factorSm, factorMd, factorLg, factorXl
type: 'foreground', // background, foreground
direction: 'horizontal',// vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
});
License
MIT
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].