How to Create Sleek Sliding Box Effect With jQuery

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.

1STWD Editorial

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Casety says

    is it possible to use a smaller image? if so, how do you change the CSS to make it work?

  2. says

    Hi!

    Thank you very much for this amazing tutorial, but i have a question, it is possible to apply only one effect (example: “bottom-center”) to several images?

    I would be very grateful for help!
    Regards.
    Krzysztof Banas.

    • says

      and second questions;) it is possible to change this code:
      img
      {
      top:0;
      left:0;
      position:absolute;
      }
      because img ( top:0; left:0; position:absolute;) completely crashes my wordpress theme:(

      thanks

  3. Micah Henshaw says

    How can i get just one of the examples, say the “top-center” to work multiple times on one page? so a gallery containing multiple images but all using the one slide effect? I have tried but only one image works and the rest turn out as static images?

    thanks

  4. Jamie says

    Nice tutorial.

    p.s. the “return to tutorial” link on the demo page appears to be broken.

  5. Ryan Turki says

    @Sasha,
    Sure you can do this, Just change the image with the class of front to a div with the same class (front). Then, in your stylesheet add the background’s color of your div, set it’s position to absolute and choose it’s height and width.
    That’s it !!
    If you need anything feel free to write your question.

  6. Adi Ulici says

    Nice tutorial and very easy to implement.
    (P.S. Watch out, the back link from the demo page is not working)

      • Kevin says

        Saad, It is not working. I just checked it as well. When you view the demo, the backlink ends up on a 404.

  7. says

    Great tutorial, just what I was looking for.
    Quick question – instead of using images with class=”front”, can you use div’s with the same class to achieve the same effect?
    So it would be something like:

    Some text here

    Thanks for sharing this!

    Sasha

  8. says

    Hi,
    This sliding box effect is very nice , i like it so much.
    Thanks a lot sharing this information with us.

  9. Ryan Turki says

    Thanks guys, If anyone needs any support or clarification just add a comment and I will reply to you !