Usage

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"'.