Tutorials

Create a Stunning Sliding Door Effect with jQuery

Written by Kevin Liew on 31 Aug 2009
124,597 Views • Shares
104 comments

Introduction

Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links:

Advertisement

This tutorial is going to be awesome! I got inspired by my friend's Image Splitting Effect from Tutsvalley. I decided to take one step further, create a four corners sliding door effect.

Basically, this is what it does:

  • Grab all the div with qitem class, find the image and replace it with four DIVs (four corners)
  • Each of the corner will have the same background image (grabbed from qitem class's child image element) but with different background position: top left, top right, bottom left and bottom right. It will still look like a whole image, however, the image is actually replaced by DIVd and divided into four portions.
  • Mouse over and mouse out event will move the corners diagonally out and in according to the mouse event.
  • Caption will be displayed after the corners have moved out.
  • If user clicked on it, it will execute the link assign to the item.

The following image illustrate how it works:

jQuery Slicing Structure

1. HTML

It's a good practise to keep HTML as simple as possible. HTML always can be simplified using CSS and Javascript. As a result from the simplification, This is the html for a single item. We can duplicate it into more than one.

In the demo, we can see there are total of 9 items. Please be aware that, in this tutorial, we are using float:left and clear:both in CSS to create the multi column and rows. Make sure the floating is cleared to ensure it doesnt mess up your existing website layout.

<div class="qitem">
	<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

2. CSS

In CSS section, it's quite simple. We have a class called qitem. qitem must be overflow:hidden to hide those four corners, float:left to create the milti rows and columns and cursor:hand/ cursor:pointer to let uses know they can click on it.

For caption, position:absolute is a must to se the z-index. Caption should be layered under the four corners

We need to set the generic setting for all the corners. We can do this in javascript, but it would be more efficient and simpler to do it with CSS. You see, the good thing in web development is, one problem can have different type of solutions.

body {
	font-family:arial;	
}

.qitem {
	/* width and height must be even number */
	width:126px;
	height:126px;	
	
	/* some styling for the item */
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	background: url('bg.gif') no-repeat;
	
	/* make sure the four divs are hidden after changing the position */
	overflow:hidden;
	
	/* absolute position enabled for children elements*/
	position:relative;
	
	/* display item in single row */
	float:left;
	
	/* hand symbol for ie and other browser */
	cursor:hand; cursor:pointer;
}

	.qitem img {
		border:0;
	}

	/* styling for caption, position absolute is a must to set the z-index */
	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:12px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#369ead;
		}

		.qitem .caption p {
			font-size:10px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
	/* allow javascript to move the corners */
	position:absolute;
	background-repeat: no-repeat; 
	z-index:200;
}

/* set the background position for different corners */
.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}

.clear {
	clear:both;	
}

3. Javascript

Javascript is abit messy this time. But I have isolated all the configurable setting on the top to make it easier to change. Basically, this is what it does:

  1. When the document is ready, it counts all the value for all corners
  2. Using each() to loop through the the item, in the loop:
    • Grab all the details: url, image path
    • Remove the img element
    • Append the four corners
    • Set the background image (image path grabbed from img element) to all the corners
    • Set the position to all the corners
    • * Due to IE7, you need to make sure the image/qitem size is even number, so that the divided value is whole number. IE7 doesn't render fraction value properly.
  3. On mouse over event: Set correct values to all the corners and animate them so that the corners are moving away from the qitem.
  4. On mouse out event: reset all the corners and animate them so that the corners are moving back to where there were.
  5. On click: execute the link (grabbed from anchor element).

The following image illustrate the calculation:

jQuery Slicing Structure

In the javascript below, we have a section for the calculation. If you look at the image above carefully, assume the item width is 126px, and values that we need to generate is 0px, 63px, -63px and 126px

Hence, (the item size we used in this tutorial is 126px)

  • var neg = Math.round($('.qitem').width() / 2) * (-1);
    (126 / 2) * (-1), neg = -63px
  • var pos = neg * (-1);
    neg = -63px, pos = (-63) * -(1), pos = 63px
  • var out = pos * 2;
    pos = 63px, pos = 63 * 2, pos = 126px

Now, we know all the mathematic calculations, how it works. It's time to combine everything into one piece!

	
$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1000;
	var speed_out = 300;	

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);	
	var pos = neg * (-1);	
	var out = pos * 2;
	
	$('.qitem').each(function () {
	
		//grab the anchor and image path
		url = $(this).find('a').attr('href');
		img = $(this).find('img').attr('src');
		
		//remove the image
		$('img', this).remove();
		
		//append four corners/divs into it
		$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
		
		//set the background image to all the corners
		$(this).children('div').css('background-image','url('+ img + ')');

		//set the position of corners
		$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});	
		$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});	
		$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});	
		$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});	

	}).hover(function () {
	
		//animate the position
		$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});	
				
	},
	
	function () {

		//put corners back to the original position
		$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});	
	
	}).click (function () {
		
		//go to the url
		window.location = $(this).find('a').attr('href');	
	});

});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

104 comments
Carl 7 years ago
Hi there, do you have any tutorials for extreme beginners? I don't know how the whole code should look when it is all put together. Also how do I place the code on wordpress? It would be great to see a tutorial on implementing jquery and plugin on wordpress (pre-code preparation)... Thank you for letting participate and for helping us out with awesome stuff...
Reply
Kevin Liew Admin 7 years ago
unfortunately, you would need at least basic knowledge in html and css to work this out.
Reply
Sades 7 years ago
Is there a way to avoid the onclick event or a way to change it so it can work with normal url i have a site that uses jquery scrollto but with the window.location it just reloads the page and goes to the anchor i need it to go but this way does not do the animation of the scrolling
Reply
Kevin Liew Admin 7 years ago
Yes, you can, in the javascript code, remove the click event, then, the link should be working properly.
Reply
Tommy 7 years ago
Is there anyway to use jquery lightbox with this? when I tried the codes conflict with eachother
Reply
Kevin Liew Admin 7 years ago
it should work fine as long as it's a jquery modal window... and you need to remove the click event:

window.location = $(this).find('a').attr('href');

remove that.
Reply
Tommy 7 years ago
Thank you so much for the reply you have no idea how big of a help this is right now. I removed the click event and the lightbox started working but the sliding doors stopped working = / Any ideas?
Reply
Tommy 7 years ago
Anybody?....please
Reply
Franco Alvarez 7 years ago
I love it!!!! Thanks for tuto!
Reply
Carlos J. Pierce 7 years ago
its great, I'm pretty sure it would be a great help in my site
Reply
cid 6 years ago
the content model of span and h1-h6 only allows phrasing content
so span h4 p /p /h4 /span is invalid

see www.w3.org/TR/html5/text-level-semantics.html#the-span-element and
www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
Reply
Rachel 6 years ago
Can I use this Effect with Shadowbox.js?
I can not get both of them to work together
Reply
Kevin Liew Admin 6 years ago
remove these lines from the jquery script:

.click (function () {

//go to the url
window.location = $(this).find('a').attr('href');
})

, it binds the click event therefore your shadowbox won't run.
Reply
Alicia 6 years ago
Hi Kevin, I deleted the JavaScript code that you said. The sliding door effect still works BUT the FancyBox (light box script) still does not work.

Any solutions yet? I want online users to able to hover their mouse over to see the sliding door effect then after clicking the thumbnail it will open a pop-up lightbox of the portfolio item
Reply
Vla Dee 6 years ago
jQuery.noConflict() is your friend :)
Reply
reladmin 6 years ago
On mouseover only text is showing inside span element. but i put another image inside it its not showing. I want to show another image on mouse over.. can you help me...
Reply
Shane 6 years ago
Would be amazing if I could get it to work. I'm trying to integrate it with the quicksand plugin so I have the <div class="qitem"></div> within each <li> of the quicksand. The image loads and that's it. It doesn't separate when I hover over it at all.
Reply
Shane 6 years ago
Guess the issue is with jQuery 1.7.1, doesn't work... :( Can you update this to work with jQuery 1.7.1?
Reply
Kevin Liew Admin 6 years ago
Not sure what is going on, I tested my demo with jQuery 1.7.1, it works fine. What I suspect is, quicksand must have added additional element to make the effect, hence, it causes this plugin fail to work. Could be the CSS style that causing it as well. Did it output any javascript error in console?
Reply
Prodyot 6 years ago
Brilliant!
Awesome!
Very useful.
Ever tried it in pure css?
If it is possible to create in pure css then it will further enhance its usability.
Thanks.
Reply
Shine 6 years ago
I dont want my style in my html so how do i get the javascript code to use my css.css file?? Any ides??
Reply
Kevin Liew Admin 6 years ago
No, you use this to link external css file:

<link rel="stylesheet" href="css_files.css" />
Reply
Yenn 6 years ago
i just can't use it with TMS slider (tms-0.3.js). when i put them together they stop work properly.
do you know what kind of problem can be?
Reply
Lipasti 6 years ago
Hey! What is wrong... When I click cmd and - ===> there comes strokes (+) on every buttonphoto?
Reply