https://github.com/theultrasoft/parallaxie
Easiest, Responsive and Customizable Parallax jQuery Plugin
https://github.com/theultrasoft/parallaxie
jquery jquery-plugin parallax parallax-javascript-library parallax-scrolling
Last synced: 2 months ago
JSON representation
Easiest, Responsive and Customizable Parallax jQuery Plugin
- Host: GitHub
- URL: https://github.com/theultrasoft/parallaxie
- Owner: theultrasoft
- License: mit
- Created: 2016-03-18T18:51:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-09T17:46:29.000Z (over 5 years ago)
- Last Synced: 2025-03-28T19:44:40.712Z (3 months ago)
- Topics: jquery, jquery-plugin, parallax, parallax-javascript-library, parallax-scrolling
- Language: HTML
- Homepage: http://theultrasoft.com/projects/parallaxie
- Size: 1.61 MB
- Stars: 68
- Watchers: 4
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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.
```
```
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.
```
.parallaxie{
min-height: 360px;
}
$('.parallaxie').parallaxie();
```
View a more intutive [Parallaxie example](http://theultrasoft.com/project/parallaxie).
### Options:
You can easily customized this plugin any time.
#### 1. On initialization:
This method gives you a quick configuration option.
```
$('.parallaxie').parallaxie({
speed: 0.5,
offset: 50,
...
...
});
```
#### 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.
```
```
| 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 |