Index
Introduction
Parallax Background Builder it is a unique Web Application, which quite simple to use and yet offers high-level modularity.
Parallax Background Builder provide you the ability to quickly and easily build an amazing animated background with parallax effect for your site or specific components.

In this example we will learn how to create a simple animated background with parallax effect in a few steps.
This is not a comprehensive guide but it would help you to get started.
First of All
Before you start building your parallax animated background you should plan how exactly would it look and behave.
For example you have to decide:
How many layers do you need?
Which image will you use in each layer?
In which direction each layer has to move?

Answering these questions, you'll be ready to start building your first parallax animated background.

To help you understand how this is done, we will go through step-by-step, planned in-advance example.

In this example we will use 5 layers with these images:

Layer 1

Layer 2

Layer 3

Layer 4

Layer 5

All layers except 'layer 4' will be repeated on X-axis, while 'layer 4' will be non-repeated image.

All layers will move on X-axis respectively to the mouse scroll and mouse move, but in different directions.

You can take a look at the final result here.

Now that we understand how our parallax animated background should look and behave, we can start build it.
Step 1 - Start Screen

Screenshot 1
First thing that you see when you open the Parallax Background Application
it is a Start Screen (Screenshot 1).
In this screen you should choose what kind of parallax backgound you want to create.

For this quick-start guide we will create a 'Full Scale' parallax animated background.

Click on 'Full Scale' animated background option (marked with orange border on Screenshot 1).

Step 2 - Background Color

Screenshot 2

Screenshot 3
Background Layer - It is the base layer, and it always presented on the 'Layers' Panel (Screenshot 2).
This Layer has only one property: Color.

To set a color, click on desired color tile in the 'Background color' section (Screenshot 3).

If you want to choose a custom color, type the HEX color code (like #FFFFFF) in the 'custom color' input field (marked with red border on Screenshot 2).
Step 3 - Creating Layers (1, 2)
Click on 'Create new Layer' icon at the bottom of 'Layers' Panel (Screenshot 4), it wil open a 'Select Image' Dialog box(Screenshot 5).

Screenshot 4

Screenshot 5

Screenshot 6
- You can type the image URL in 'Image URL' input field, but for this example we'll use images from the built-in images gallery (Screenshot 6).

In order to open the images gallery click on 'Show Images Gallery' button in the 'Select Image' Dialog box.

Select an image marked with Red number 1 in Screenshot 5, and click ok.


Screenshot 7

In the 'Image Mode' panel, apply the following settings (as shown in the Screenshot 7):
    - Set the layer as 'Pattern'.
    - Select 'Repeat on the X-axis' option.
    - Check the 'Snap to bottom' Checkbox.

Repeat this step to Layer 2, but this time using another image, (marked with Red number 2 in Screenshot 6).
At this point you should have a similar result to (Screenshot 8):

Screenshot 8
Step 4 - Creating Layers (3, 4, 5)
In this step we'll create the layers in the same way as in step 2, each with different settings.


Screenshot 9

Layer 3 - Select an image marked with Red number 3 in Screenshot 6 (used in previous step), and apply the following settings (as shown in the Screenshot 9):
    - Set the layer as 'Pattern'.
    - Select 'Repeat on the X-axis' option.
    - Set the 'Offset' to -50, then click the 'Set' button.

Screenshot 10

Layer 4 - Select an image marked with Red number 4 in Screenshot 6 (used in previous step), and apply the following settings (as shown in the Screenshot 10):
    - Set the layer as 'Image'.
    - Set the 'Offset' input to X = 150, Y = -100, then click the 'Set' button.

Screenshot 11

Layer 5 - Select an image marked with Red number 5 in Screenshot 6 (used in previous step), and apply the following settings (as shown in the Screenshot 11):
    - Set the layer as 'Pattern'.
    - Select 'Repeat on the X-axis' option.
    - Set the 'Offset' to 50, then click the 'Set' button.
Now you have a full image, it should looks like in (Screenshot 12):

Screenshot 12
Step 5 - Attach Mouse Move events
To make a layer move respectively to the mouse, you should set the layer`s 'Direction', 'Speed', and 'axis'.
Lets begin from Layer 1:

Select 'Layer 1' by clicking on it in the 'Layers' panel (Screenshot 13).

Screenshot 13
In the 'Layer behavior' Panel, turn-on the 'Mouse Move' checkbox (Screenshot 14).

Screenshot 14

Screenshot 15


Apply for this layer the following settings (as shown in the Screenshot 15):
    - Set the 'Direction' option to Backward.
    - Set the 'Move on' option to X - axis.
    - Set the 'Speed' input filed to 2, then click 'Set' button.

Repeat this step to another layers, each with different settings, defined bellow:

Layer 2:
    - Set the 'Direction' option to Backward.
    - Set the 'Move on' option to X - axis.
    - Set the 'Speed' input filed to 3, then click 'Set' button.

Layer 3:
    - Set the 'Direction' option to Forward.
    - Set the 'Move on' option to X - axis.
    - Set the 'Speed' input filed to 2, then click 'Set' button.

Layer 4:
    - Set the 'Direction' option to Backward.
    - Set the 'Move on' option to X - axis.
    - Set the 'Speed' input filed to 1, then click 'Set' button.

Layer 5:
    - Set the 'Direction' option to Forward.
    - Set the 'Move on' option to X - axis.
    - Set the 'Speed' input filed to 3, then click 'Set' button.
Step 6 - Attach Mouse Scroll events
To make a layer move respectively to the mouse`s scroll, you should set the layer`s 'Direction', 'Speed', and 'Orientation'.
Lets begin from Layer 1:

Select 'Layer 1' by clicking on it in the 'Layers' panel (Screenshot 16).

Screenshot 16
In the 'Layer behavior' Panel, turn-on the 'Mouse Scroll' checkbox (Screenshot 17).

Screenshot 17

Screenshot 18


Apply for this layer the following settings (as shown in the Screenshot 18):
    - Set the 'Direction' option to Forward.
    - Set the 'Orientation' option to Horizontal.
    - Set the 'Speed' input filed to 10, then click 'Set' button.

Repeat this step to another layers, each with different settings, defined bellow:

Layer 2:
    - Set the 'Direction' option to Forward.
    - Set the 'Orientation' option to Horizontal.
    - Set the 'Speed' input filed to 25, then click 'Set' button.

Layer 3:
    - Set the 'Direction' option to Backward.
    - Set the 'Orientation' option to Horizontal.
    - Set the 'Speed' input filed to 10, then click 'Set' button.

Layer 4:
    - Set the 'Direction' option to Backward.
    - Set the 'Orientation' option to Horizontal.
    - Set the 'Speed' input filed to 5, then click 'Set' button.

Layer 5:
    - Set the 'Direction' option to Backward.
    - Set the 'Orientation' option to Horizontal.
    - Set the 'Speed' input filed to 25, then click 'Set' button.
Step 7 - Implementation

Screenshot 20
Congratulations! You now have your parallax animated background ready for use.
The last thing to do is to embed it in your Web Site.

Click on "Get Embed Code" button on top of the screen (Screenshot 19)

Screenshot 19





Copy the code that appear in the pop-up 'Embed Code' Window, to Clipboard (Screenshot 20)

Paste it between "<head> </head>" tags in your HTML page.

Enjoy.

You can see created Parallax Background in this example here.
The main background image for this example you can find here.