HTML JavaScript
Clone or download
Latest commit 593112b Jun 24, 2018

README.md

paroller.js

npm
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: Example page, More examples

Install

Before closing </body> element include:

  1. jQuery
  2. jquery.paroller.js

npm

$ npm install paroller.js  

Yarn

$ yarn add paroller.js  

Bower

$ bower install paroller.js  

CDN

jsDelivr, unpkg, bundle.run

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

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

⭐️ Show your work ⭐️

Interesting showcase or project?

Share it here and let others see your creative work.

👏👏👏

License

MIT