paroller.js

![npm](https://www.npmjs.com/package/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 ```

 element include:  

  

1. jQuery  

2. jquery.paroller.js  

  

  

#### npm

sh  

$ npm install paroller.js

  

  

#### Yarn

sh  

$ yarn add paroller.js

  

  

#### Bower

sh  

$ bower install paroller.js

  

#### CDN

jsDelivr, 	unpkg, bundle.run



Use

javascript  

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

html

    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"

>

  

  

npm and browserify

sh  

require('paroller.js');

  

  

Options  

$3

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 |  

  

$3

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

  

:warning: Since factor is multiplier it must be set for paroller.js to have parallax effect.   

  

$3

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|  



$3

Only effects elements with paroller.js type set to foreground! 

  

$3

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

javascript  

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