Tip:
Highlight text to annotate it
X
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.