Parallax Scroll Effect For Objects And Backgrounds - sj-parallax

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.

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.

  • Publication date: 13.12.2018
  • Source