Modern Background / Foreground Parallax Scroll Plugin - rellax

rellax is a tiny yet configurable jQuery plugin that allows to create subtle parallax scrolling effects on both background and foreground elements such as images, videos and text. Works nicely on desktop, mobile and tablet.

How to use it:

1. Load the core JavaScript file jquery.rellax.js after you've loaded the latest version of jQuery library.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.rellax.js"></script>

2. Add your own parallax elements into the DIV containers with the 'data-rellax' and ' data-rellax-container' attributes.

<div data-rellax data-rellax-container>
  <img data-rellax src="bg.jpg" alt="">
</div>

<div data-rellax data-rellax-container>
  <video class="fill" data-rellax autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
</div>

3. If you wish to create a 'fixed' parallax effect on page scroll, just replace the CSS class 'rellax' instead of 'rellax-fixed'.

<div class="rellax-fixed" data-rellax-container>
  <img class="rellax-fixed" src="bg.jpg">
</div>

4. Specify how far in the background you want the parallax element to appear:

<span data-rellax data-rellax-amount="0.75">Scroll</span>

5. Specify the bleed When using a container to keep parallax elements from overflowing their parent some visual artefacts which you may identify them as blurry edges.

<span data-rellax data-rellax-bleed="20">Scroll</span>

6. Initialize the plugin and done.

$('.rellax').rellax();

7. Pass the config options as noticed above to the rellax function in the JavaScript:

$('.rellax').rellax({
  amount: 0.5,
  bleed: 0,
  scale: 1,
  container: '[data-rellax-container]'
});

Change log:

2017-02-02

• Add IE fallbacks
• small position fix

2017-01-31

• Treat rellax containers differently

---

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