不含jQuery的页面背景切换

Feature navigation

Introduction
Wide browser support
Easy set-up
Customizable parallax settings
No jQuery needed
Notes
Playground

Introduction

justParallax.js is a lightweight javascript plugin which allows users to make the background of their webpage have a subtle parallax effect with just 2 lines of code.

justParallax.js is also fully customizable and does not depend on any Javascript library to function.

Click the background to change it.

Wide browser support

justParallax.js supports all major browsers including IE7+, Google Chrome, Mozilla Firefox, Safari, Opera and many more.

Easy set-up

Get justParallax.js up and running in just 4 easy steps.

Add a background to your <body> tag.
Include justParallax.js to your html document.
Customize your parallax settings. (optional)
Call ¨initParallax(settings);¨ when your page is ready.

Customizable parallax settings

justParallax.js supports multiple customizations, here is a list of all options and it's default values.

<script src='./js/justParallax.js' type='text/javascript'><script>
<script>
//Default settings
speed: 8; //The speed of the scrolling background, 1 is faster than 10.
vertical: true; //Set to true if the background should scroll vertically.
vertical_inversed: false; //Set to true if the vertical direction should be inversed.
horizontal: true; //Set to true if the background should scroll horizontally.
horizontal_inversed: false; //Set to true if the horizontal direction should be inversed.
//An example of the usage of justParallax.js
var settings = {
	speed: 5,
	vertical: true,
	vertical_inversed: true,
	horizontal: true,
	horizontal_inversed: false
};
initParallax(settings);
</script>

You only have to define the settings in the variable that you want to change. All undefined settings will fall back to their default setting.

No jQuery needed

justParallax.js works with plain Javascript which gives the best performance and doesn´t need jQuery or any other Javascript library to function.

Notes

justParallax.js is merely a tool to achieve a great website, here are some tips and tricks about how to use the tool.

Watch the users screen size.
When the user scrolls, the background image will move and it will repeat itself when it has reached it's max. A good solution for this is to use patterns, patterns will repeat themselves and no one will have this problem.
Play around with the settings
By playing with the settings you will create the most wonderfull effects. For example: when you combine the vertical and horizontal scroll, the background will scroll diagonal.
Request new features
When you have some new ideas for features to this tool you can report them to this e-mail address or you can add a comment on the Codecanyon page .

Playground

Click the background to change it.

Option	Setting
Speed:
vertical:
vertical_inversed:
horizontal:
horizontal_inversed: