Create a Stunning Sliding Door Effect with simple jQuery
A quick and easy tutorial on how to use simple jQuery animation & CSS to create a stunning sliding door effect.
35When you’re creating a website first impression counts for a lot, with simple jQuery animation you can add numerous effects to your elements. In this tutorial we will be creating an effect commonly named as Sliding Doors. It’s rather simple to execute and easy to play around with and if done right it can give a nice finishing touch to your site.
Develop amazing web layouts on your 8GB Acer Aspire computer using an advanced Adobe contribute CS5 and an upgradable flash software.
Gather your files
Lets get started.
- Create a new root folder, name it as you wish.
- Within that folder create a HTML File called index.html, also a CSS file and a JS File.
- Finally create a folder called images.
You should use your own images for whatever purpose you use this tutorial for or you are free to use the ones provided in the download.
Create the HTML Markup
We are going to start off with a very basic HTML structure which we will add to later in the tutorial. Copy and paste the code below into your index.html file:
<!doctype html> <html> <head> <title>jQuery Sliding Doors Tutorial | The Finished Box</title> </head> <body> <div id="container"> </div> </body> </html>
Attach the CSS File
Underneath the title tag add the following:
<link rel="stylesheet" href="style.css" />
Attach the JS File
Underneath the stylesheet you just added insert the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="custom.js"></script>
In this tutorial we will be referencing the Google jQuery API to load jQuery. If you want to download the latest version of jQuery for offline purposes you can download it here.
Add the body elements
Now that we have everything going according to plan, we shall add the following div’s within the container:
<div id="vertical" class="third"> <img src="images/underlay.jpg" /> <img src="images/image-1.jpg" class="top" /> </div> <div id="left" class="third"> <img src="images/underlay.jpg" /> <img src="images/image-2.jpg" class="top" /> </div> <div id="bottom-left" class="third last"> <img src="images/underlay.jpg" /> <img src="images/image-3.jpg" class="top" /> </div> <div id="bottom" class="third"> <img src="images/underlay.jpg" /> <img src="images/image-4.jpg" class="top" /> </div> <div id="right" class="third"> <img src="images/underlay.jpg" /> <img src="images/image-5.jpg" class="top" /> </div> <div id="bottom-right" class="third last"> <img src="images/underlay.jpg" /> <img src="images/image-6.jpg" class="top" /> </div> </div>
Each div I assigned a unique ID which we will refer to later in jQuery to give a seperate animation, also I assigned a class to each of them called third so we can give them each a style. The class last is for alignment purposes of this tutorial.
Within these div’s I have 2 images, one of them has the class top assigned to it, this is the one that will be animated. The other image is the one that is underneath it.
You should now have something that looks like this:
jQuery Sliding Doors Tutorial | The Finished Box <link rel="stylesheet" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="custom.js"></script> <div id="container"> <div id="vertical" class="third"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-1.jpg" alt="" /></div> <div id="left" class="third"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-2.jpg" alt="" /></div> <div id="bottom-left" class="third last"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-3.jpg" alt="" /></div> <div id="bottom" class="third"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-4.jpg" alt="" /></div> <div id="right" class="third"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-5.jpg" alt="" /></div> <div id="bottom-right" class="third last"><img src="images/underlay.jpg" alt="" /> <img class="top" src="images/image-6.jpg" alt="" /></div> </div>
Add the CSS
Now that we have our markup ready it’s time to style it up, there’s isn’t much CSS to this tutorial, regardless, add the following to your CSS file:
html,body{margin:0;padding:0;background:#e8e8e8}
#container { width:960px; margin:0 auto; padding-top:150px }
.third {
width:293px;
margin:0 40px 40px 0;
overflow:hidden;
float:left;
position:relative;
}
.third img { display:block; }
.top { position:absolute; top:0; left:0; z-index:20 }
.last { margin-right:0; }
The important thing is that you have overflow:hidden on your div that contains the image, that way when we animate the image with the class of top it wont show outside of the div leaving you with a great effect.
Time for the jQuery
Now we are going to animate the image’s using jQuery. This part is relatively simple and will make more sense to you when you start playing around with it. First off, open up your JS File you created.
Create a function
$(function() {
// js code here
});
Whatever JavaScript you put inside that function will load when the DOM is ready.
Adding the animation
Now we will add the animation for the div with the ID of bottom-left, insert the following code inside your function:
$('#bottom-left').hover(function() {
//hover on
$('img.top', $(this)).stop().animate({left: '-293px', top: '188px'}, 500);
},function() {
//hover off
$('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
});
Each time the div bottom-left is hovered it will find the image with the class of top relative to bottom-left (in this case $(this) refers to #bottom-left). Then if there is anything in the queue it will be stopped, finally it will animate -293px from the left and 188px from the top giving you a nice swish effect. 500 refers to the duration of the animation, change it to whatever you desire. When you hover off the div bottom-left the image will animate to its natural state also at the duration of 500.
Here’s the code I used for the other div’s, you can play around with the top and left positions to create different effects:
$('#vertical').hover(function() {
$('img.top', $(this)).stop().animate({top: '188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({top: '0'}, 500);
});
$('#left').hover(function() {
$('img.top', $(this)).stop().animate({left: '-293px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0'}, 500);
});
$('#bottom').hover(function() {
$('img.top', $(this)).stop().animate({top: '-188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({top: '0'}, 500);
});
$('#right').hover(function() {
$('img.top', $(this)).stop().animate({left: '293px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0'}, 500);
});
$('#bottom-right').hover(function() {
$('img.top', $(this)).stop().animate({left: '293px', top: '188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
});
That’s all there is to it!
Hopefully now you have a better understanding of how to use jQuery to obtain great effects and can go onto learning how to push these even further. If you followed the tutorial step by step with any luck you would have ended up with a result something like this.
If you have anything to add to the tutorial or want to show us something you came up with let us know in the comments below and we’ll get back to you. Good luck!
