How to Create Sleek Sliding Box Effect With jQuery

Posted in Coding, Tutorials • 1127 days ago • Written by 1STWD Editorial • 34 Comments

Today we’re going to create some sliding boxes effects built with jQuery and some CSS. Throughout this tutorial I’ll explain every line of used code with details,  Hope you will enjoy this understand it easily.

If you want to follow along with the source files, you can download them by clicking here (*.zip archive). You can also take a look at the final demo here.

Step 1: Preparing our HTML, CSS & JS files

1. Create a root folder and choose a name for it, mine is SlidingBoxes.
2. In the root folder create a HTML file and name index.html, a css file and a js file.
3. Than create a folder and name it images (this folder will contain the images needed).

Now we are ready for step 2.

Step 2: Preparing the html file structure

First we need to include the files we created in the previous step, into the header part of our HTML.

Let’s begin with the css file :

<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;<br />

Now we’ll attach the latest version of jQuery from Google’s AJAX Libraries repository:

</p>
<p>&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />

And now the last thing is our javascript file :

</p>
<p>&lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;<br />

Now our header should look this:

&lt;strong&gt;<br />
&lt;/strong&gt;<br />
&lt;head&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;<br />
&lt;/head&gt;<br />

Now we will start with our body elements:

We’re going to create 6 div’s because we will apply 6 different animations.

<br />
&lt;div id=&quot;top-left&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;top-center&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;bottom-center&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;left&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;right&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;top-right&quot; class=&quot;wrap&quot;&gt;<br />
   &lt;img src=&quot;img/back.jpg&quot; /&gt;<br />
   &lt;img src=&quot;img/front.jpg&quot; class=&quot;front&quot; /&gt;<br />
&lt;/div&gt;<br />

Explanation:

I used 6 div’s with different id’s (each id refers to where the animation starts ) and with the same class (wrap class) so we can add some styles to each one with css. Each div contains 2 images : the front and back images. Here is the images I used :

Front.jpg and back.jpg.

Step 3: Let’s add some CSS !

Now head over to your css file, we will begin with wrap class :

<br />
.wrap<br />
{<br />
  float:left;<br />
  position:relative;<br />
  width:300px;<br />
  height:150px;<br />
  margin:20px;<br />
  overflow:hidden;<br />
}<br />

To have our images positioned one next the other we have to use the float left technique. I used the a margin of 20px to have some space between our images, next I set a width of 300px and a height of 150px . Also you have to set the position of this element to relative and a hidden overflow so anything that goes below or higher than the height that we put will be hidden.

CSS for Images :

<br />
img<br />
{<br />
 top:0;<br />
 left:0;<br />
 position:absolute;<br />
}<br />

We set our images to absolute and their top and left positions to 0.

Step 4: The essential part : jQuery

We’re going to start with the jQuery’s main function:

<br />
$(document).ready(function(){<br />
 // animation code will be written here<br />
});<br />

Now we are going to add the animation for the first div ( #top-left ) :

<br />
$(document).ready(function(){<br />
$('#top-left').hover(function(){<br />
$(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);<br />
 },function(){<br />
$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 });<br />

Explanation:
When the top-left div is hovered ( in this case $(this) refers to #top-left ) we are going to seek for the front class situated in this div and we’re going to animate it ( We have to set the top to 150px and the left to 300px so our front image can move with a nice effect), the 500 refers to duration. And when the div is not hovered we’re going to set back the top and left positions to 0.

To obtain the other effects you have to change the left and top positions.

Here is all the effects I used :

<br />
$(document).ready(function(){<br />
 $('#top-left').hover(function(){<br />
 $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);<br />
}, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 $('#top-center').hover(function(){<br />
 $(this).children('.front').stop().animate({'top' : '150px'}, 500);<br />
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 $('#bottom-center').hover(function(){<br />
 $(this).children('.front').stop().animate({'top' : '-150px'}, 500);<br />
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 $('#left').hover(function(){<br />
 $(this).children('.front').stop().animate({'left' : '300px'}, 500);<br />
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 $('#right').hover(function(){<br />
 $(this).children('.front').stop().animate({'left' : '-300px'}, 500);<br />
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
 $('#top-right').hover(function(){<br />
 $(this).children('.front').stop().animate({'top' : '150px','left' : '-300px'}, 500);<br />
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});<br />
});<br />

That’s it !

Thanks for following this tutorial. I hope you liked it and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this. If you have any problem or you need some help feel free to write your question or request into the comments section.