Retweet Create a Stunning Sliding Door Effect with jQuery

11 January 2010 Monday

This application was viewed 685 times




Share|

Create a Stunning Sliding Door Effect with jQuery

Learn how to make a stunning four corners sliding effect easily with jQuery. It´s elegant, unique and really cool solution for thumbnail gallery. This tutorial includes detailed explanation that will guide you through the whole process.

View the Demo

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:

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:

 

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.

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

  1. body {   
  2.     font-family:arial;     
  3. }   
  4.   
  5. .qitem {   
  6.     /* width and height must be even number */  
  7.     width:126px;   
  8.     height:126px;      
  9.        
  10.     /* some styling for the item */  
  11.     border:4px solid #222;     
  12.     margin:5px 5px 5px 0;   
  13.     background: url(´bg.gif´) no-repeat;   
  14.        
  15.     /* make sure the four divs are hidden after changing the position */  
  16.     overflow:hidden;   
  17.        
  18.     /* absolute position enabled for children elements*/  
  19.     position:relative;   
  20.        
  21.     /* display item in single row */  
  22.     float:left;   
  23.        
  24.     /* hand symbol for ie and other browser */  
  25.     cursor:hand; cursor:pointer;   
  26. }   
  27.   
  28.     .qitem img {   
  29.         border:0;   
  30.     }   
  31.   
  32.     /* styling for caption, position absolute is a must to set the z-index */  
  33.     .qitem .caption {   
  34.         position:absolute;   
  35.         z-index:0;     
  36.         color:#ccc;   
  37.         display:block;   
  38.     }   
  39.   
  40.         .qitem .caption h4 {   
  41.             font-size:12px;   
  42.             padding:10px 5px 0 8px;   
  43.             margin:0;   
  44.             color:#369ead;   
  45.         }   
  46.   
  47.         .qitem .caption p {   
  48.             font-size:10px;    
  49.             padding:3px 5px 0 8px;   
  50.             margin:0;   
  51.         }   
  52.   
  53.   
  54.   
  55. /* Generic setting for corners */  
  56. .topLeft, .topRight, .bottomLeft, .bottomRight {   
  57.     /* allow javascript to move the corners */  
  58.     position:absolute;   
  59.     background-repeat: no-repeat;    
  60.     z-index:200;   
  61. }   
  62.   
  63. /* set the background position for different corners */  
  64. .topLeft {   
  65.     background-position: top left;     
  66. }    
  67.   
  68. .topRight {   
  69.     background-position: top right;    
  70. }    
  71.   
  72. .bottomLeft {   
  73.     background-position: bottom left;    
  74. }    
  75.   
  76. .bottomRight {   
  77.     background-position: bottom right;    
  78. }   
  79.   
  80. .clear {   
  81.     clear:both;    
  82. }  

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:

 

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!

  1.        
  2. $(document).ready(function() {   
  3.   
  4.     //Custom settings   
  5.     var style_in = ´easeOutBounce´;   
  6.     var style_out = ´jswing´;   
  7.     var speed_in = 1000;   
  8.     var speed_out = 300;       
  9.   
  10.     //Calculation for corners   
  11.     var neg = Math.round($(´.qitem´).width() / 2) * (-1);      
  12.     var pos = neg * (-1);      
  13.     var out = pos * 2;   
  14.        
  15.     $(´.qitem´).each(function () {   
  16.        
  17.         //grab the anchor and image path   
  18.         url = $(this).find(´a´).attr(´href´);   
  19.         img = $(this).find(´img´).attr(´src´);   
  20.            
  21.         //remove the image   
  22.         $(´img´, this).remove();   
  23.            
  24.         //append four corners/divs into it   
  25.         $(this).append(´<DIV class=topLeft></DIV><DIV class=topRight></DIV><DIV class=bottomLeft></DIV><DIV class=bottomRight></DIV>´);   
  26.            
  27.         //set the background image to all the corners   
  28.         $(this).children(´div´).css(´background-image´,´url(´+ img + ´)´);   
  29.   
  30.         //set the position of corners   
  31.         $(this).find(´div.topLeft´).css({top:0, left:0, width:pos , height:pos});      
  32.         $(this).find(´div.topRight´).css({top:0, left:pos, width:pos , height:pos});       
  33.         $(this).find(´div.bottomLeft´).css({bottom:0, left:0, width:pos , height:pos});    
  34.         $(this).find(´div.bottomRight´).css({bottom:0, left:pos, width:pos , height:pos});     
  35.   
  36.     }).hover(function () {   
  37.        
  38.         //animate the position   
  39.         $(this).find(´div.topLeft´).stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});    
  40.         $(this).find(´div.topRight´).stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});       
  41.         $(this).find(´div.bottomLeft´).stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});      
  42.         $(this).find(´div.bottomRight´).stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});     
  43.                    
  44.     },   
  45.        
  46.     function () {   
  47.   
  48.         //put corners back to the original position   
  49.         $(this).find(´div.topLeft´).stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});      
  50.         $(this).find(´div.topRight´).stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});       
  51.         $(this).find(´div.bottomLeft´).stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});    
  52.         $(this).find(´div.bottomRight´).stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});     
  53.        
  54.     }).click (function () {   
  55.            
  56.         //go to the url   
  57.         window.location = $(this).find(´a´).attr(´href´);      
  58.     });   
  59.   
  60. });  

Tags: combo, jquery, forms, multiselect,


Retweet Create a Stunning Sliding Door Effect with jQueryBookmark and Share

You write your thoughts

Please login to post comments here from the right corner.

your add
icon free icon icon set vector icon free catalog catalog template jquery news ticker widget tools tutorial php slider video youtube effects menu thumbnail forms facebook zoom image combo multiselect modal polaroid gallery expand code feedback contact navigation slider tagcloud Skateboard psd templates files badges subscribe panel login temlate file free office holland free template tabs prototype css scriptaculous opacity moo autocomplete wordpress themes design theme button images photoshop fonts font nav pdf logo style high javascript pretty photo jqery lightbox Themes Blog popular blog desing joomla xhtml brushes hair footer admin mootols slide show blackbox new download class first plugin upload browse Page effect modalbox web application urlitooltips sliding boxes captions flatchat chat ajax messaging browser hoverlightbox CSS Dev General Javascript PHP SQL search avatar vector Drupal Joomla Oscommerce javaScript phototype manager ajaxplorer flash xml rotator bookmarking pageflip slideshow poll text component script mediaplayer imagegallery pictograms car poster player mp3 radio onlineradio navigations drop-down collection brush tree textures paper pop-up bumpbox web2.0 iphone film frame twitter page fan mail delete dynamic calender form handbook city social paint timeline clock connect bar sharing accordion quotes ticker photo-effects background 3D media player graphic rss leaf green glossy bubble icon comic clean cool web 2.0 png actionscript ietter rotating Menu animated textured site masking pasword app layer sponge bob popup bubble tooltips horizontal prototip tooltip pack charachters comics blog action icon.psd flavour navi tango gradients istanbul mixed css3 sleek animations program html5 website Layer styles ultimate candy Media icons dropdown snow icon innerfade hover sub tag