Skip to content
Easiest, Responsive and Customizable Parallax jQuery Plugin
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Added license. Mar 20, 2016
bower_components/jquery Added bower package manager support Mar 31, 2016
example
.gitignore Added bower package manager support Mar 31, 2016
LICENSE.txt Added license. Mar 20, 2016
README.md Added bower package manager support Mar 31, 2016
bower.json Added bower package manager support Mar 31, 2016
parallaxie.js Added license. Mar 20, 2016

README.md

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>
Option Description Default
speed Speed of the parallax. You can use any floating point number. But practically, give any fractional number between -1 and 1. Example: 0.3 or -0.5 0.2
repeat Should the background repeat or not. Possible values: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat' 'no-repeat'
size background size of the image. Possible values: 'auto', 'contain', 'cover' 'cover'
pos_x Position of the image horizontally. Possible values: 'left', 'center', 'right' or any percentage like: '30%' 'center'
offset The parallax offset. Possible values: Any integer. 0
You can’t perform that action at this time.