"Our first step on the ladder"
Yes! As promised in the previous chapters, this time we are going to get some coding done. This will be an interesting change as we will be able to see the results of our own coding. Of course, we are still going to use some libraries. But hey, we don't want to reinvent the wheel just because some of the effects we want to achieve are quite complex.
For now we are going to make all these modifications directly to the template. I think this is the easiest way to start. Later on we will make our own modules and components.
The points we are going to cover in this chapter are:
- Adding a Parallax effect to our template
- jQuery library jScrollPane
- Adding useful tooltips
As always, we seek to make our site more interesting through all these effects and utilities. But this time there's something more—we are also seeking to have a good time modifying our template. Coding can be fun! Don't believe me? Let's start and you'll see in a moment.
For this first modification, we are going to work with one of my favorite effects, the Parallax effect. We are going to use this in our header. If you remember our template, our header look like this:
Though this header looks fine with our template (I did it myself, so don't be a critic), we want something more eye-catching. We are going to change this header to a Parallax-powered one.
If you have never seen a Parallax effect, I think we can describe it as a mimic of a 3D effect. It basically consists of some images, each one on top of the other. We can use this to create an illusion of distance. We can see this better with a representation, as shown in the following picture:
As we can see there are three elements in the image: a cat, a car, and the moon. The cat is in the first instance, then the car, and at the bottom is the moon. Each one of these elements looks smaller than the previous one, though we know that the moon is bigger than a cat.
This is what forms the perspective, letting us know that the cat is nearer than the moon and thus creating the 3D effect that we are seeking.
In order to achieve this effect, we will need to complete some steps. But
first, take a look at our site's code so that we can later appreciate the
differences. Just open the templates/jj15/index.php file and
search for the next piece of code inside this file:
<div id="header">
<div id="login">
<jdoc:include type="modules" name="login" />
</div>
<img src="<?php echo $this->baseurl?>/templates/jj15/images/ header_image.gif" />
</div><!-- End of header -->
As we can see, in this little piece of code, we were declaring a DIV and
placing a simple image inside it. Forget about the login DIV,
it doesn't really matter for this example.
This was quite simple as we really don't need to do anything else. The CSS
for this header DIV is also quite simple. Take a look at the
templates/jj15/css/styles.css file:
#header{
height: 58px;
position: relative;
}
We only need to add the height of the DIV and the relative
positioning. All this code is quite simple and, though we are not going to
complicate things too much, we do need to make some changes.
But first, let me present the images that we are going to use. The following image is the background:
The next image is the middle section; it will feature some small ninjas:
And the following image with some mountains and trees is for the front part:
Nice, aren't they? Why don't you take a look at them in the code
bundle? They are placed in the Chapter 6 folder and are named
parallax_1.png, parallax_2.png, and
parallax_3.png.
These images were made for me by Fairhead Creative, and we are going to put
these images to use right now. Place them inside the
templates/jj15/images folder.
Now, if you haven't opened it yet, open the
templates/jj15/index.php file and replace the following
code:
<div id="header">
<div id="login">
<jdoc:include type="modules" name="login" />
</div>
<img src="<?php echo $this->baseurl?>/templates/jj15/images/ header_image.gif" />
</div><!-- End of header -->
Replace it with the following code:
<div id="header">
<div id="login">
<jdoc:include type="modules" name="login" />
</div>
<ul id="parallax">
<li id="parallax_bottom"> </li>
<li id="parallax_middle"> </li>
<li id="parallax_top"> </li>
</ul>
</div>
Tip
This code, the CSS that will come next, and even the JavaScript, can be found inside the code bundle, so take a look in the folder for Chapter 6.
It's not much different from the previous one, is it? We have created
an ul list with some li elements
inside. Each one of these li elements will contain one of the
images we have seen before. How are we going to place them? With a little bit of
CSS help.
Open the templates/jj15/css/styles.css file; we are going
to add some CSS rules at the bottom:
/**
* Parallax effect
*/
#parallax{
position: relative;
}
#parallax_bottom{
position: absolute;
z-index: 3001;
width: 980px;
height: 57px;
background-image: url('../images/parallax_3.png'),
background-repeat: no-repeat;
}
#parallax_middle{
position: absolute;
z-index: 3002;
width: 980px;
height: 57px;
background-image: url('../images/parallax_2.png'),
background-repeat: no-repeat;
}
#parallax_top{
position: absolute;
z-index: 3003;
width: 980px;
height: 57px;
background-image: url('../images/parallax_1.png'),
background-repeat: no-repeat;
}
Here we are not only giving the elements a z-index
value, width, and height, but are
also, very importantly, placing each image inside each element. Now, if all has
gone okay, on our site we will see something similar to the following
screenshot:
As you can see, we have accomplished our task of putting the image one on top of the other, but the problem is that the login button has been covered. There is nothing that some CSS can't solve, just search for this code in the CSS file:
#login{
position: absolute;
right: 0;
z-index: 1;
}
Give a z-index greater than the other elements, for
example, 3004, as follows:
#login{
position: absolute;
right: 0;
z-index: 3004;
}
Now the login button will return to its previous location, in front of all the other elements, so our visitors can click on it:
Now you might be thinking, "hey, it's nice, but not much different from how it was before," and you'd be right. However, at this point we are going to introduce the JavaScript part.
The first thing we need to do is download the Parallax plugin. This time we are going to use the "jQuery Parallax" plugin. We can find it at the following URL:
http://plugins.jquery.com/project/jquery-parallax-style.
Or, you can search for "parallax" in the plugins section of the jQuery site. Once you get there, download the plugin.
Inside the plugin file you will find a file called
jquery.parallax-0.2-min.js. Place it inside the
templates/jj15/js folder.
Now we need to link the script in the header of our
template—the templates/jj15/index.php
file:
<jdoc:include type="head" />
<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15//js/jquery.parallax-0.2-min.js"></script>
This will load the plugin, and let us use it to create the effect. We are not loading the jQuery library. Remember that as we are using the SC jQuery Joomla! plugin, we don't need to load the jQuery library.
If we weren't using this Joomla! plugin, or another similar one, we would need to load the jQuery library in a similar manner.
After linking the script, we are going to also link one script of our own. We
will call it parallax.js and link it as follows:
<jdoc:include type="head" />
<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15//js/jquery.parallax-0.2-min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?> /templates/jj15//js/parallax.js"></script>
However, we need to create this file, and also create it inside the
templates/jj15/js folder. Call it parallax.js
and inside it place the following code:
jQuery(document).ready(function($) {
$('#parallax').parallax({
'elements': [
{
'selector': '#parallax_bottom',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0
}
}
}
},
{
'selector': '#parallax_middle',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.1,
'invert': true
}
}
}
},
{
'selector': '#parallax_top',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.2
}
}
}
}
]
});
});
Now that's quite a bit of code, but most of it is quite easy to understand. Let's take a look at some pieces of it:
$('#parallax').parallax
This code adds the Parallax effect to the element with the
parallax ID. Then we have the elements array:
'elements':
Here we can define the properties and values of each element. Each one of the mentioned elements is created more or less as follows:
{
'selector': '#parallax_bottom',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0
}
}
}
}
First goes the selector, where we indicate the element we are talking about,
and then the property. In our case, we are working with the x
property. This is because our elements are only going to be moved
horizontally.
Later, we define values for the background position; those values are:
-
initial— is the starting position for the background element. For our background, we are going to select 0. -
multiplier—defines the quantity of movement. The greater the number the more our elements will be moved. -
invert—with this we can select if the elements will move in the mouse direction(false)or not(true).
Tip
There are some other options, but for our example these three will work okay. If you want to go deeper into this plugin, you can take a look at:
http://www.dom111.co.uk/blog/coding/jquery-parallax-0-2-minor-updates/125.
But first, take a look at the result—check the next image:
I've tried to capture the image in another position, but the best way of checking it is by trying it yourself. So why don't you give it a try? Remember you can find the code and images in the code bundle, so you can try this effect in no time. You will only need to download the plugin from the creator's page.
You may have noticed that we have used transparent PNG images to achieve this effect. Most modern browsers will have no problems with transparencies, but some old ones, like IE 6 may be unable to show these transparencies.
However, we can use a plugin like IFixPng improved to solve these problems. You can find this plugin at:
http://plugins.jquery.com/project/iFixPng2.
Like the other module, it can be searched for on the jQuery site, and with its help, we can solve the transparency problems under IE 6.
Now we are done with the Parallax effect. Did you like it? Then get ready for the next one.