This library is a fork of the repository Universal Parallax.

inkParallax

Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser compatibility - including mobile platforms (iOS, Android). See demo.

Install

npm i ink-parallax --save

Setup

import inkParallax from 'ink-parallax';

@import '/path/to/node_modules/ink-parallax/src/ink-parallax.scss';

new inkParallax().init();

<div class="ink-parallax" data-parallax-image="path/to/your_image">
<!--
  You can also use background-image to define your image instead of using data-parallax-image=""
  .bg-class: {
    background-image: url('img.jpg');
  }
-->
<div class="ink-parallax bg-class"></div>

Custom speed

You can change the parallax speed; the higher the number, the slower the parallax effect

new inkParallax().init({
  speed: 6.0
});

speed: 1 is the minimum value before the background image is fixed

Tips

Opacity

If you want your backround color to shine through or dampen the image without making it a .png - just add transparency to it

.parallax {
  opacity: 0.5;
}