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="https://github.com/theultrasoft/Parallaxie/raw/master/js/jquery.min.js"></script>
<script src="https://github.com/theultrasoft/Parallaxie/raw/master/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>