Free and easy to use


Easy install and use the parallax effect

1. Download and install

First download sj-parallax.js and sj-parallax.css here, after downloading continue with the following steps.

  • Move the files to your website folder
  • Include the files to your index file by editing and add the following lines to your head tag in the index.html / index.php
  • Include files to website <script type="text/javascript" rel="javascript" src="[path to sj-parallax.js]"></script> <link type="text/css" rel="stylesheet" href="[path to sj-parallax.css]">
  • Done! You're now able to use the parallax effect.

  • 2. Add effect to element

    Background When adding a parallax effect to the background
    This only makes the background move Example code<div class="sj-parallax" data-type="background" data-offset="50" style="background-image: url('/img/example.png')></div>
    Normal element When adding a parallex effect to an normal element
    This makes the entire element move Example code<img class="sj-parallax" data-type="normal" data-offset="20" src="/img/example.png">
    Fixed Background When adding a parallex effect to a background of an element with a fixed position
    This only makes the background move Example code<div class="sj-parallex" data-type="fixedbackground" data-offset="50"></div>

    3. Configure

    When using one of the background types, you have the ability to set the position of the background.
    You can do this by adding 'data-from="top"' or 'data-from="center"' or 'data-from="bottom"'.


    The latest version here