paroller.js

paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements.

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

Install

Before closing </body> element include jQuery and paroller.js.

1. jQuery library

<script src="jquery-3.1.1.min.js"></script>

2. jquery.paroller.js

<script src="jquery.paroller.min.js"></script>

3. Use

// define element
a)
<div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div>
b)
<div id="my-element"></div>
// initialize paroller.js
a) $('.my-paroller').paroller();
b) $("#my-element").paroller({ factor: 0.5, factorXs: 0.2, type: 'foreground', direction: 'horizontal' });

npm

$ npm install paroller.js
require('paroller.js');

Yarn

$ yarn add paroller.js

Bower

$ bower install paroller.js

Usage

To enable parallax scrolling effect you can use data-paroller-* attributes on selected elements or set values via jQuery.
'factor' sets speed and distance of element's parallax effect on scroll.

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

                    <div class="paroller">Awesome element with parallax effect</div>

                    // initialize paroller.js and set attributes for selected elements
                    $(".paroller, [data-paroller-factor]").paroller({
                        factor: 0.3,            // multiplier for scrolling speed and offset
                        factorXs: 0.1,           // multiplier for scrolling speed and offset
                        type: 'foreground',     // background, foreground
                        direction: 'horizontal', // vertical, horizontal
                        transition: 'transform 0.2s ease-in' // CSS transition
                    });
                    
                    <div data-paroller-factor="-0.1"
                        data-paroller-factor-xs="0.1"
                        data-paroller-type="foreground"
                        data-paroller-direction="vertical">
                        Awesome element with parallax effect
                    </div>

                    // initialize paroller.js
                    $("[data-paroller-factor]").paroller();
                

Via data attributes

data-paroller-factor Sets offset and speed. It can be positive (0.3) or negative (-0.3). Less means slower.
<div data-paroller-factor="0.3"></div>
data-paroller-type This attribute has two values background and foreground.
If not set the default value is background.
<div data-paroller-factor="0.3" data-paroller-type="foreground"></div>
data-paroller-direction This attribute hsd two values: vertical, horizontal.
If not used the default value is set to: vertical.
<div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div>
data-paroller-transition Sets CSS transition on elements with paroller type set to foreground.
If not used the default value is set to: translate 0.1s ease.
<div data-paroller-type="foreground" data-paroller-transition="all 0.2s ease-in"></div>

Via JavaScript

            // initialize paroller.js and set attributes for selected elements

            $(".paroller, [data-paroller-factor]").paroller({
                factor: 0.3,            // multiplier for scrolling speed and offset
                factorXs: 0.1,          // multiplier for scrolling speed and offset if window width is <576px
                factorSm: 0.2,          // multiplier for scrolling speed and offset if window width is <=768px
                factorMd: 0.2,          // multiplier for scrolling speed and offset if window width is <=1024px
                factorLg: 0.3,          // multiplier for scrolling speed and offset if window width is <=1200px
                type: 'foreground',     // background, foreground
                direction: 'horizontal' // vertical, horizontal
                transition: 'transform 0.1s ease' // CSS transition, added on elements where type:'foreground'
            });
            

Demo

👋 Heola! こんにちは! Ahoj! Merhaba! Olá!
html
class="mega my-element"
data-paroller-factor="0.5"
data-paroller-factor-lg="0.4"
data-paroller-factor-md="0.3"
data-paroller-factor-sm="-0.2"
data-paroller-factor-xs="-0.1"
data-paroller-type="foreground"
data-paroller-direction="horizontal"
data-paroller-transition="transform .2s linear"
js
$('.my-element').paroller();
გამარჯობა! Hello! Zdravo! Привет! 你好! Ciao! !مرحبا Hallå! Χαίρετε! ¡Hola! 👋
html
class="paroller-example"
js
$('.paroller-example').paroller({
factorXs: 0.1,
factorSm: 0.1,
factorMd: -0.4,
factorLg: -0.5,
factorXl: -0.6,
factor: -0.4,
type: 'foreground',
direction: 'horizontal'
});
html
class="jumbotron" style="background: url('https://unsplash.it/1920/800?image=950') no-repeat center;
background-size: cover;"
data-paroller-factor="0.5"
data-paroller-factor-xs="0.2"
js
$('.jumbotron').paroller();
html
class="jumbotron" style="background: url('https://unsplash.it/1920/800?image=152') repeat center; background-size: cover;"
data-paroller-factor="-0.5"
data-paroller-factor-sm="-0.2"
data-paroller-factor-xs="-0.1"
js
$('.jumbotron').paroller();
html
class="jumbotron" style="background: url('https://unsplash.it/1920/500?image=974') no-repeat center; background-size: cover;"
data-paroller-factor="-0.2"
js
$('.jumbotron').paroller();
html
class="image" style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: cover;"
data-paroller-factor="0.5"
data-paroller-factor-md="0.3"
data-paroller-factor-sm="0.2"
data-paroller-factor-xs="0.1"
class="image" style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: cover;"
data-paroller-factor="-0.4"
class="image" style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: cover;"
data-paroller-factor="-0.1"
js
$('.image').paroller();
$('.image').paroller();
$('.image').paroller();
html
class="jumbotron" style="background: url('https://unsplash.it/1920/500?image=867') no-repeat center; background-size: cover;"
data-paroller-factor="-0.15"
data-paroller-direction="horizontal"
js
$('.jumbotron').paroller();
html
class="jumbotron" style="background: url('https://unsplash.it/1920/1200?image=249') repeat bottom; background-size: cover;"
data-paroller-factor="0.3"
data-paroller-direction="horizontal"
js
$('.jumbotron').paroller();
html
class="jumbotron" style="background: url('https://unsplash.it/1920/900?image=888') no-repeat center; background-size: cover;"
data-paroller-factor="-0.5"
data-paroller-direction="horizontal"
js
$('.jumbotron').paroller();
Scrolling is fun ✌️
html
class="mega align-center" data-paroller-factor="0.1" data-paroller-type="foreground"
js
$('.mega').paroller();