Create a Stunning Sliding Door Effect with jQuery

Create a Stunning Sliding Door Effect with jQuery


Create a Stunning Sliding Door Effect with jQuery

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

102 comments

Shane
Mon, 13th February 2012
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
Mon, 13th February 2012
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
Mon, 20th February 2012
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
Thu, 23rd February 2012
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
Thu, 23rd February 2012
No, you use this to link external css file:

<link rel="stylesheet" href="css_files.css" /> Reply
Yenn
Thu, 23rd February 2012
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
Fri, 24th February 2012
Hey! What is wrong... When I click cmd and - ===> there comes strokes (+) on every buttonphoto? Reply
Rajd
Sat, 25th February 2012
I see the demo run fine on IE6. But, when I try this effect on my pieces, this works but the four absolute positioned blocks stick to their positions even when I scroll the page. Can anybody please help me out on this...? Thank You. Reply
Shid
Thu, 15th March 2012
Theres anyway to show a second image? instead of a plain text? thanks~ Reply
Kevin Liew Admin
Wed, 21st March 2012
Just put an image inside this:
<span class="caption"></span> Reply
Word
Tue, 3rd April 2012
I followed your response to the image query : Just put an image inside this:
<span class="caption">insert image here </span> but it did not work? It would be awesome to show another image underneath Reply
anamika59
Tue, 10th April 2012
<span class="caption">insert image</span> may not work as such. You may consider including the image as a background of the caption container (in the css style). I think if the tag is not a span but any other div, it may also work but I did not try.

Overall, it is a very nice tutorial and nice effect. Reply
Matt
Tue, 17th April 2012
awesome effect but can you make it work on a rectangular image as apposed to a square one? tried fiddling with the maths section but got confused. the image size i'm wanting is width:400px; height: 150px Reply
Agent M
Mon, 18th June 2012
hi there, great tutorial however I'm a little confused at how the top, right,bottom, left classes work without it being in the markup. I'm still learning so when I see classes in css that aren't targeted in the mark up I start to panic. Is there another way or is it right in front of me lol thanks:) M Reply
trent
Fri, 6th July 2012
Is there a way to target blank the links? Doesn't work in the a tag. Reply
Jamaes Prince
Wed, 18th July 2012
HI

Is there anyway of having an image as the background instead of the text behind? i have tried putting it in the <span> but nothing works Reply
Kevin Liew Admin
Wed, 18th July 2012
hmm... it won't work I guess.. you can slice a text element into 4. Reply
Jamaes Prince
Thu, 19th July 2012
tthanks for the reply - how would i do that? im not too familiar with that?

Apart from that thanks to a clear tutorial, works brilliantly and very effective!

Also is there anyway to increase space inbetween the boxes? Reply
Arthur
Tue, 14th August 2012
How would I go about making this into a single vertical line of boxes apposed to the 3x3? Reply
Tony
Sun, 7th October 2012
I made it into a single vertical line of boxes by mistake, haven't a clue how i did it though. Would you like my css file? Reply
Mr. Ling
Thu, 30th August 2012
I have a carousel on the same page, there for I use jquery 1.5.1.min js. Everything work except that the text is half visible in IE9, while it is centered in Chrome. What is the solution? Reply
Tony
Thu, 27th September 2012
Hi, looked at the demo and thought - wow i want that on my site. Then, when i read all of the comments about how brill it is, my heart was sinking more and more. Why? Because me being a total numpty, i can't get it to work.... Reply
Kevin Liew Admin
Mon, 1st October 2012
You should download the demo and start it from there. Reply
Tony
Sun, 7th October 2012
I did, 3 times. I either get a vertical line of boxes or horizontal, never the group of 3. I only ever see the background images & text. I never see the foreground images and they never animate. As David Bowie once said - i'm an absolute beginner...... Reply
John Verber
Wed, 21st November 2012
Hey I downloaded the demo and started messing with it. as I wanted to use this on my site since I have only icons on my main page that wobble. Problem is I can't get this thing center to save my life. I figured I'd put it in a wrapper class and use margin: 45px auto 0px auto; text-align: center; But it's still off. I tried adding a width; but it still is acting crazy. I'm not sure if it has to do with the absolute positioning of your qitem class or if it's something I'm doing. My other icons centered up magically no problem...but your jQuery effects are just too awesome to pass up ....can you give me some help? Reply
Jayesh
Wed, 5th December 2012
any fix we have got for the IE? if any one has implemented please share... Reply
Kevin Liew Admin
Thu, 6th December 2012
It should work with IE! Reply
sam
Sat, 29th December 2012
I'm trying to make it where I have 4 images arranged like 4 corners, and each has an overlay that goes up in 1 direction (top left image has a door over it that goes to the top left, top right's door goes to top right, etc) but I can't get the hover actions to perform. Any tips on how to change your code such that this will work? Reply
Clone
Tue, 23rd April 2013
Hello,

Really cool idea here. I have the same question as many others in the comments. How can this be modified to allow for rectangular images? it still works with "landscape" oriented image but the horizontal division occurs about 2/3 up the image. vertical division remains in the middle. If you could elaborate on this I'm sure many people would appreciate it! Thanks for sharing :) Reply
Clone
Tue, 23rd April 2013
I just stumbled upon the solution for the rectangular image conundrum.

I created separate variables to handle the "height" calculations for the corners:


//Calculate horizontal divide for rectangular image
var neg2 = Math.round($('.qitem').height() / 2) * (-1);
var pos2 = neg2 * (-1);
var out2 = pos2 * 2;


And then added the pos2 variable to the css height value here:


$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos2});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos2});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos2});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos2});


And now the rectangular image bisects equally both horizontally and vertically. Reply
Sanj
Wed, 24th April 2013
Thanks a lot for this effect Kevin. In addition to the effect being triggered on hover, I also want it to be triggered automatically without hover, say every 7 seconds. Is that possible? If yes, could you please give the code here?

Warm Regards,
Sanj Reply
Eduardo
Fri, 18th April 2014
Thank you for this thumbnail effect. It's fantastic.

I want to ask you for open links in new window. I'he proved and don't work with target="_blank"

┬┐Can you help me please? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement