Mobile-friendly Parallax Scrolling Effect In jQuery - Paralex

Paralex is a tiny, configurable, mobile-friendly parallax scrolling library for jQuery.

When a user scrolls the page down, the plugin moves the background content (like text, background images, ...) slower than the foreground content.

How to use it:

1. Include jQuery library and the Paralex plugin's files on the page.

<link rel="stylesheet" href="/path/to/paralex.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/paralex.js"></script>

2. Add background and foreground to the parallax container with the CSS class of 'paralex'. Done.

<div class="paralex">
  <div class="background" style="
       background: url('bg.jpg');
       background-position-x: 50%;
       background-position-y: 50%;
       opacity: 1;">
  </div>
  <div class="foreground">
    ... foreground content ...
  </div>
</div>

3. Config the animation speed using the following CSS classes:

• slow
• fast
• medium

<div class="paralex slow">
  ...
</div>

<div class="paralex fast">
  ...
</div>

<div class="paralex medium">
  ...
</div>

4. Determine whether or not to adjust the height of the parallax container to fit the foreground content using the following CSS classes:

• third
• half
• full

<div class="paralex third">
  ...
</div>

<div class="paralex half">
  ...
</div>

<div class="paralex full">
  ...
</div>

5. Reverse the direction of scrolling.

<div class="paralex reverse">
  ...
</div>

6. Make the background 'fixed' positioned instead of 'absolute'.

<div class="paralex fixed">
  ...
</div>

---

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