Tiny Fixed And Scroll Parallax Effect Plugin For jQuery - easyParallax

File Size: 7.8 KB
Views Total: 1724
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Fixed And Scroll Parallax Effect Plugin For jQuery - easyParallax

easyParallax is a very small jQuery plugin which applies the 'Fixed' and/or 'Scroll' parallax effects to any container elements when scrolling down the webpage. Heavily based on CSS3 3D transforms.

Basic usage:

1. Just load the core JavaScript file easy.parallax.js after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="js/easy.parallax.js"></script>

2. Add the CSS class 'parallax' to your parallax container and specify the background image using data-image-src attribute as follow.

<div class="parallax" 
     data-image-src="bg.jpg">
</div>

3. That's it. You can also initialize the parallax plugin by calling the function on the target container like this:

$('.parallax').easyParallax();

4. Default options to customize the parallax effect. You can also pass the following options using data-option attribute directly on the parallax container just like the Step 2.

$('.parallax').easyParallax({
  speed: 6,
  effect: 'scroll', // or 'fixed'
  position: 'default',
  text: false,
  imageposition: 'center',
  zindex: '-1'
});

Change log:

2016-11-21

  • add position absoulte to fixed scroll effect

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