Demo

👋 Heola! こんにちは! Ahoj! Cześć! 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"
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();