Parallaxie

Parallaxie is a jQuery plugin to create parallax effects on your websites or templates. It is very lightweight to download and rendering by your browser.

Current Version:

0.5

Dependency:

This plugin has only one dependency, which is jQuery

Demo:

Watch Parallaxie in action: http://static.theultrasoft.com/parallaxie/demo/

License:

Licensed under the MIT License (LICENSE.txt)

Copyright (c) 2016 THE ULTRASOFT (http://theultrasoft.com)

Installation:

Installing this plugin is very easy. You have to include jQuery and Parallaxie scripts to your website.

<script src="js/jquery.min.js"></script> <script src="js/parallaxie.min.js"></script> 

Fire up the plugin with any css selector. You must have a background image set into that element or you can use the data-image attribute, will explain about this later. Also, make sure the parallax element must have some height or some content which has some height.

<style> .parallaxie{     min-height: 360px; } </style> <div class="parallaxie" style='background: url("path/to/your/image.png")'></div> <script> $('.parallaxie').parallaxie(); </script> 

View a more intutive Parallaxie example.

Options:

You can easily customized this plugin any time.

1. On initialization:

This method gives you a quick configuration option.

<script> $('.parallaxie').parallaxie({ 	speed: 0.5, 	offset: 50, 	... 	... }); </script> 

2. On declaration:

On declaration of the parallaxie element you can specify the option using the data-parallaxie attribute. This gives you to control or customize different parallaxie elements with different configurations.

<div class="parallaxie" style='background: url("path/to/your/image.png")' data-parallaxie='{ 	"speed": -0.4 	"size": "auto" }'></div>