Skip to content
jQuery library for generating beautiful parallax scrolling effect, with image preloader and custom scroll function.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
demo
dist
npm
src
.gitignore
code-of-conduct.md
contributing.md
license.md
pull-request-template.md
readme.md

readme.md

jQuery Parallax

jQuery parallax scrolling library with image preloader and custom scroll function (for those that use custom content scrollers).

Buy Me Coffee

Song of the project: Joe Satriani - Surfing with the Alien

Versioning Scheme

I use a 3-digit Semantic Versioning identifier, for example 1.0.2. These digits have the following meaning:

  • The first digit (1) specifies the MAJOR version number.
  • The second digit (0) specifies the MINOR version number.
  • The third digit (2) specifies the PATCH version number.

Complete documentation can be found by following the link above.

Examples

Before using the library you have to upload the files from the "src" folder to your server and add the library to your project.

<link href="src/css/parallax.css" rel="stylesheet" type="text/css" />
<script src="src/js/parallax.js" type="text/javascript"></script>

Be sure to check out the demo if you are confused.

Example 1 - Without Parameters

CSS

#my-parallax {
    background: #111 url(../img/1.jpg) no-repeat 0px 0px;
    background-size: 100% auto;
}

HTML

<div id="my-parallax" class="parallax parallax-dark"></div>

JS

$("#my-parallax").parallax();

Example 2 - With Parameters

HTML

<div id="my-parallax" class="parallax parallax-dark"></div>

JS

$("#my-parallax").parallax({
    image  : "./demo/img/1.jpg",
    height : "400",
    scroll : "default"
});

Example 3 - With Parameters & Manual Scroll

HTML

<div id="my-parallax" class="parallax parallax-dark"></div>

JS - Setup

$("#my-parallax").parallax({
    image  : "./demo/img/1.jpg",
    height : "400",
    scroll : "manual"
});

JS - Manual Scroll

$("#my-parallax").parallaxScroll(scrollPosition);

Themes

Three themes exist:

  • .parallax-default - main color: #f65d96

Default Theme Example:

<div id="example" class="parallax parallax-default"></div>

Default Theme

  • .parallax-dark - main color: #111111

Dark Theme Example:

<div id="example" class="parallax parallax-dark"></div>

Dark Theme

  • .parallax-light - main color: #ffffff

Light Theme Example:

<div id="example" class="parallax parallax-light"></div>

Light Theme

Settings

Default library settings are as follow.

var settings = {
    image  : "",
    height : "400",
    scroll : "default"
};

Allowed parameters are as follow:

  • image - String containing image location
  • height - Number representing required height of the parallax window.
  • scroll - String with value default for regular scroller or manual for custom scroller

Contribution

Please review the following documents if you are planning to contribute to the project:

Integration

My hourly rate is fairly reasonable so, if you need help with integrating Parallax to your existing project, feel free to contact me via the email address below.

Integration inquiries: office@djordjejocic.com

Support

Please don't hesitate to contact me if you have any questions, ideas, or concerns.

My Twitter account is: @jocic_91

My support E-Mail address is: support@djordjejocic.com

Copyright & License

Copyright (C) 2016 Đorđe Jocić

Licensed under the MIT license.

You can’t perform that action at this time.