SimpleParallax is very and simple lightweight JavaScript plugin for parallax image animations. It can convert any images to parallax animation within the website, there is no need to use any background images.

Features:

• It can be installed with NPM and Yarn.
• It works with <img> tag, so you don't need to use it with background-img.
• Easy to implement, no coding knowledge is required.
• Supports to change orientation.
• Can be delayed animation.

Install with NPM

$ npm install simple-parallax-js

Install with Yarn

$ yarn add simple-parallax-js

How to use it:

1. Include the Javascript simpleParallax.min.js at the bottom of the web page.

<script src="path/to/simpleParallax.min.js"></script>

2. or use the below CDN link provided by jsDelivr.com:

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>

3. Add the basic HTML to the page.

<img class="thumbnail" src="image.jpg" alt="image">

4. Initialize the plugin and we're ready to go.

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

5. Initialize the plugin with several images:

var images = document.querySelectorAll('img');
new simpleParallax(images);

Plugin's default options:

<img class="thumbnail" src="path/to/demo-3.jpg" alt="image">

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
  scale: 1.4,
});

<img class="thumbnail2" src="path/to/demo-3.jpg" alt="image">

var image2 = document.getElementsByClassName('thumbnail2');
new simpleParallax(image2, {
  scale: 1.4,
  orientation: 'right'
});

<img class="thumbnail3" src="path/to/demo-3.jpg" alt="image">

var image3 = document.getElementsByClassName('thumbnail3');
new simpleParallax(image3, {
  scale: 1.4,
  orientation: 'left',
  overflow: true
});