Parallax Scroll Effect For Objects And Backgrounds - sj-parallax

sj-parallax is a simple, lightweight jQuery plugin for the smooth and fast parallax scroll effect that supports both HTML elements (e.g. images, text, DIVs) and background images.

How to use it:

1. Import the latest jQuery library and stylesheet sj-parallax.css & JavaScript sj-parallax.js into the document.

<link href="sj-parallax.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="sj-parallax.js"></script>

2. Add the CSS class sj-parallax to the parallax element and specify the parallax type in the data-type attribute:

• background: background image
• normal: regular HTML element
• fixedbackground: fixed background

<div class="sj-parallax" 
     data-type="background"
     style="background-image: url(bg.jpg)">
     <h1>jQuery Script ↕</h1>
</div>

<div class="sj-parallax" 
     data-type="fixedbackground"
     style="background-image: url(bg.jpg)">
     <h1>jQuery Script ↕</h1>
</div>

<img class="sj-parallax" 
     data-type="normal" 
     src="bg.jpg">

3. Customize the offset in pixels (Default: 10px).

<div class="sj-parallax" 
     data-type="background"
     data-offset="50"
     style="background-image: url(bg.jpg)">
     <h1>jQuery Script ↕</h1>
</div>

4. Set the scroll direction: top, bottom, or center.

<div class="sj-parallax" 
     data-type="background"
     data-offset="50"
     data-from="top"
     style="background-image: url(bg.jpg)">
     <h1>jQuery Script ↕</h1>
</div>

---

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