Easy Responsive jQuery Parallax Plugin - Parallaxie

An easiest, responsive and customizable parallax jQuery Plugin used for applying parallax scrolling effects to your DIVs and background images.

How to use it:

1. To get started, you should load the jQuery Parallaxie plugin after JQuery library when needed.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="parallaxie.js"></script>

2. Add the CSS class 'parallaxie' to the desired container and config the parallax scrolling effect using data-parallaxie attribute.

<div id="container" class="parallaxie" 
     data-parallaxie="{OPTIONS HERE}">
</div>

3. Add a background image to the parallax container.

#container {
  background: url("bg.png");
}

4. Initialize the plugin and done.

$('.parallaxie').parallaxie();

5. You can also pass the options to the plugin in the JavaScript, during init.

$('.parallaxie').parallaxie({

  // aniamtion speed
  // between -1 and 1
  speed: 0.2,

  // CSS background-repeat property
  // 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
  repeat: 'no-repeat',

  // CSS background-size property
  // 'auto', 'contain', 'cover'
  size: 'cover',

  // Position of the image horizontally.
  // 'left', 'center', 'right' or any percentage
  pos_x: 'center',

  // Parallax offset in pixels.
  offset: 0,

});

Changelog:

2019-10-10

• Fixed an issue when reload page

---

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