Posted on on Thursday, August 13th, 2009 at 6:13 pm.
As a follow up to my introduction to JParallax, I’ll be working through a simple demonstration of how to create a header for your website design. As I have already been through the explanation of what parallax and JParallax are in my previous post, I will be cutting straight to the chase, and moving onto the concept for my example.
The Concept – Arguably The Hardest Part
As with many aspects of website design, it’s not necessarily the getting something to work that’s the hard part, but creating a concept which will give you the best results. For the purpose of this tutorial, I’ll be developing the idea of a rock band performing on a stage. I’ve chosen this concept, as the way that the musicians are positioned on the stage will certainly lend its self to the perspective that JParallax will enhance.
Please click the banner below to see a working version of the demo.
The stage will be made up of the following parts.
The background – The background in this example is simply the furthest part of the stage, the back wall. To add the impression of distance I have added a strong Gaussian Blur in Photoshop to a photo of a real stage backdrop.
Stage Lights – I have used two sets of stage lights, one positioned to the left and one positioned to the right.
Guitar Player – The guitar player will sit second from the front on the stage, and as the light in this scenario would be coming from the background, I will be using silhouette characters with a slight glow around the edges.
Lead Singer – The lead singer will be the nearest person to the foreground meaning that in proportion to all other stage people and objects will appear to be moving faster.
Band Logo – Just to give an example of how this could be used in an everyday example of website design, the logo will sit at the very forefront and have no movement at all.
You will be able to download all of the files at the end of this tutorial.
Things You’ll need before we start.
As I mentioned in the first part to this tutorial, the JParallax effect is created using the JParallax and JQuery Libraries. Firstly we need to download both JavaScript files to use in our header. You can either download these files individually or download all of my files in one compressed folder.
JParallax Download – At time of post the latest release is 0.9.9 BETA
JQuery Download – In my example I have used the latest release, but JParallax will also work with some older versions of JQuery.
As JParallax is based on the JQuery Library, it is important that the JQuery Library is called first, when importing these to our sample HTML file.
Creating images for your JParallax header.
In order to create the images which be used as part of my JParallax header, I will simply use a combination of jpgs and pngs. As png’s support transparency, this will allow me to create a glowing outline around my musician characters in the demo.
The Code Bits – Getting It Working
Getting JParallax to work is somewhat easier than you might think. The vast majority of the work will be done by the two JavaScript files that we have downloaded. For the rest, there are three main parts to the coding side of things. I won’t go into much detail , as I think its quite self explanatory.
The JavaScript instantiation – This is the only bit of JavaScript that needs to be used inline, and simply instantiates the JParallax. This should be added to the header of your page.
-
<script type="text/javascript">// <![CDATA[
-
jQuery(document).ready(function(){
-
jQuery('#parallax').jparallax({});
-
});
-
// ]]></script>
The CSS – This simply defines the window that will act as the viewpoint for our demonstration. The div is named “#parallax”, and is the only required CSS.
-
#parallax {
-
position:relative;
-
overflow:hidden;
-
width:700px;
-
height:280px;
-
}
The HTML – This is the complete snippet of HTML that is required for this demo. Please remember, that the JQuery JavaScript file is called before the JParallax.
The Fun Part – Now it’s your turn
As with any tutorial that you may work through on the net, the fun part is when you get to have a go yourself. Please feel free to leave comments giving examples of website design ideas that you’ve created. For my next blog post, I will be develop the parallax further, showing how to manipulate the JavaScript to give more flexibility and a few different effects.
Download All files Here
Channel
on August 13th, 2009 Says:
I’ve been following this blog for sometime and you guys are always showing great stuff!
Keep on the great job!
PS: I’ve addicted all the marketing team here to the blog! hahahaha
on December 14th, 2009 Says:
great example of jparallax is in Carmilla’s website: http://www.rossocarmilla.com