Hello guys,
It’s Ken from WebDesy.com
In this screencast, I’m going to show you
how to easily add a parallax scrolling effect
to your WordPress theme.
Before we go any further, let me assure you
that you’ll be able to do it in any case
regardless of your background.
In other words, you are NOT supposed to be
a programmer to be able to add some parallax
animation to your blog’s background.The
only skill that you really need is to be able
to copy and paste.
I betcha can do it.
Right?
So, move on.
In order to keep things clean and neat, we’ll
add a very simple parallax effect and you’ll
be able to build on it if you wish to.
So, here are the steps:
Go to http://web-features.net
You’ll see two options to create your first
effect of this sort, choose the first option
('Full Scale' Animated Background) because
we want to keep things as simple and easy
as possible.
Now, you can set the color of your background.
You can do it in the Background Color panel.
Just click on the color you’d like for your
parallax background.
In case you’re Ok with the default color,
move on to the next step.
You need to create a new layer so that you
can add your objects to it.
In order to add a new layer, you need to click
the “Create new layer” option at the bottom
right corner.
While creating a new layer, you can either
specify the url to your image (for instance
if you uploaded one to your ftp server) or
select an image from the available gallery
(click the “Show images gallery” option
for that).
To show your both the ways, I’ll add one
image from my server and another from the
default images gallery.
So, while I’m in the “Select image”
dialog box, I type in a direct link to my
image, which is http://webdesy.com/webdesy-wp/wp-content/uploads/2012/04/webdesy_logo.png
That done, I click OK and it’ll add my image
to the canvas.
As you have probably noticed, that image got
multiplied a few times.
That happens because it's set (in the “Image
Mode” panel) to repeat the image both on
the x-axis and y-axis by default (the “Repeat
Both X/Y” option).
If you want to have your image repeated horizontally
only, check the “Repeat on the X-axis option.
In case you’d like it to be repeated vertically,
make sure to tick the “Repeat on the Y-axis”
radio button (option).
You can also define your desired X and/or
Y offset.
Well, that’s cool but what if 
you don’t really want to repeat it at all?
No problem.
Just make sure to tick the “Image” option
(you have the “Pattern” option ticked
by default).
Now you should have just one image.
You can snap your image to right and/or bottom.
Plus you can define its offset as well.
OK, we’re done with the right-hand panel.
The left-hand panel allows you to define your
image’s behavior.
You can make it react to your mouse cursor
movements and/or your scrolling.
First let’s take a closer look at the Mouse
Move option.
It has 3 settings: Direction, Move on and
Speed.
The Direction 
option allows you to specify how your image
should move: in the same direction where you
move your mouse cursor (click “Forward”
for that) or in the opposite one (the “Backward”
option).
The “Move on” setting makes it possible
to specify whether you’d like your image
to move on the x-axis, y-axis 
or both.
And the “Speed” text field allows you
to specify how fast you want the image to
move (up to 10 pixels).
Now let’s see the options in the Mouse Scroll
portion.
So, you may tick the Mouse Scroll option.
By the way, you can either leave the Mouse
Move option enabled or disable it by unticking.
It’s up to you.
The Mouse Scroll feature has the following
settings: Direction, Orientation, and Speed.
The Direction option allows you to define
how your image should move in relation to
your scrolling direction (Forward or Backward).
The Orientation option empowers you to specify
which scroll direction 
you prefer (Vertical, Horizontal, and Diagonal).
And the possible speed settings are exactly
as in the case with Mouse Move (up to 10 pixels).
You can add as many layers (in the “Layers”
panel) as you see fit.
But I wouldn’t recommend creating too many
layers because it can (and most likely will)
slow down your site’s performance.
And that’s not good terms of usability and
SEO.
Judging from my experience with the tool,
3-5 layers seem optimal.
Now let’s add just one image from the built-in
images gallery.
Just 
click on the “Add new layer” option in
the bottom right corner.
Now select “Show images gallery”.
That done, just click on the image that you
like to add and hit the “OK” button.
You can set it up using the same options that
I described while using the previous image.
Once you’re done with your animation, you
can just hit the “Get Embed Code” button.
In 
the “Embed Code” dialog box, click the
“Copy to Clipboard” button.
It’ll say “Successfully copied” if you
did everything properly.
Now just go to your WordPress admin panel.
Expand the “Appearance” drop-down menu,
go to Editor.
That done, find the “Header” (header.php)
option in the right-hand sidebar and click
on it.
Now just paste the previously copied code
somewhere between the  and  tags.
And click the “Update File” button at
the bottom.
And that’s about it.
Now 
you can just go 
to 
your site’s home page (front-end in geek
speak) and refresh it by hitting the F5 key.
