Image Parallax Scroll Effect With jQuery - SimpleParallax

Image Parallax Scroll Effect With jQuery - SimpleParallax

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'
  });
});

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

  • Publication date: 17.11.2017
  • Source