jQuery Parallax Scrolling Plugin paroller.js 1.44
Release Date: 2019-1-17 22:51
paroller.js1.44
A lightweight jQuery plugin that creates parallax scrolling effects.
You can use it with elements that have background properties or any other elements.
Scrolling elements can move vertically or horizontally.
Controlled through HTML data-* attributes or jQuery options.
Mobile-ready
Easy to Use
Usage
Initialize paroller.js
1 | $('.my-paroller').paroller(); |
Initialize paroller.js and set attributes
1 | $(".my-element").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'foreground', direction: 'horizontal' }); |
Select elements and set attributes
1 2 3 4 5 6 7 | <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"> |
Select elements
1 | <div class="my-element"></div> |
Options
Data Attributes
You can control parallax effects through data-paroller-* attributes 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-factor
Set the speed and distance of an element's parallax effect while scrolling. Values can be positive (0.3) or negative (-0.3). Smaller values mean slower movement. Different signs (+/-) indicate different directions (up/down, left/right).
data-paroller-factor-*
Set the parameter multiplier for the 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 |
JavaScript
1 2 3 4 5 6 7 | // Initialize paroller.js and set attributes for the selected elements $(".paroller, [data-paroller-factor]").paroller({ factor: 0.2, // Multipliers for scroll speed and offset; values control the +/- direction factorLg: 0.4, // Multipliers for scroll speed and offset when the window width is less than 1200px; values control the +/- direction type: 'foreground', // background, foreground direction: 'horizontal' // vertical, horizontal}); |
Set factor breakpoints
1 2 3 4 5 6 7 8 9 10 11 | // Initialize paroller.js and set attributes for the selected elements$(".paroller, [data-paroller-factor]").paroller({ factor: 0.3, // +/-, select this value if no other breakpoint factor is configured 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}); |