Image Parallax Scroll Effect With jQuery - SimpleParallax

Image Parallax Scroll Effect With jQuery - SimpleParallax
File Size: 10.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple, lightweight jQuery plugin which applies a subtle Parallax Scroll Effect to any images within the document using CSS3 transform's scale and translate properties.

Install & download:

# NPM
$ npm install simple-parallax --save

# Bower
$ bower install simple-parallax --save

How to use it:

1. Import the latest version of jQuery library and the jQuery SimpleParallax plugin into the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="src/simpleParallax.js"></script>

2. Initialize the plugin on the image and done.

<img class="simple-parallax" src="https://picsum.photos/1920/720/?random" alt="image parallax">
$(document).ready(function() {
  $('.simple-parallax').simpleParallax();
});

3. This will wrap the image into a parallax container as follow:

<div class="easy-parallax" style="overflow:hidden">
  <img class="simple-parallax" src="https://picsum.photos/1920/720/?random" alt="image parallax" style="transform: scale(1.2) translateY(-54.1732px);">
</div>

4. Set the orientation of the parallax scroll.

$(document).ready(function() {
  $('.simple-parallax').simpleParallax({
    'orientation': 'down'
  });
});

5. Set the scale ratio of your parallax image.

$(document).ready(function() {
  $('.simple-parallax').simpleParallax({
    'scale': '1.2'
  });
});

6. Set the delay time in milliseconds.

$(document).ready(function() {
  $('.simple-parallax').simpleParallax({
    'delay': 0'
  });
});

8. Decide whether to apply an overlay on the original image.

$(document).ready(function() {
  $('.simple-parallax').simpleParallax({
    'overflow': true
  });
});

Changelog:

2018-08-13

  • add delay parameter

2018-06-21

  • add delay parameter

2018-04-04

  • use CSS hardware acceleration for animations

2018-03-19

2018-03-15

  • destroy method implementation

2018-01-15

  • add rate error to avoid issue when image translate out of its container

2017-11-27

  • update class name typo

2017-11-23

  • making the plugin compatible with CommonJS for npm users

2017-11-22

  • update init function so the calculation can be executed at the first load of the screen without any scroll

2017-11-22

  • add requestAnimationFrame to the animate function

This awesome jQuery plugin is developed by geosenna. For more Advanced Usages, please check the demo page or visit the official website.