How to Create Sleek Sliding Box Effect With jQuery

Posted in Coding, Tutorials • Posted on 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.

22 Written Articles

34 Comments Best Comments First
  • juan iconshock

    Thursday, April 22nd, 2010 00:06

    1

    great tutorial and nice result :)

    0
  • Pooja

    Thursday, April 22nd, 2010 14:38

    12

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

    0
  • shubelal

    Thursday, April 22nd, 2010 06:46

    11

    Nice tutorials its realy very helpful
    thank you :)

    0
  • sarfraz raza

    Thursday, April 22nd, 2010 09:22

    13

    Beautiful Site, I really like it.

    0
  • Sasha

    Thursday, April 22nd, 2010 18:50

    14

    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

    0
  • Ryan Turki

    Thursday, April 22nd, 2010 20:53

    16

    @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.

    0
    • Sasha Endoh

      Friday, April 30th, 2010 04:55

      26

      Thanks! I figured it could be that simple, but it doesn’t hurt to ask ;)

      0
  • Adi Ulici

    Thursday, April 22nd, 2010 14:06

    15

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

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 15:23

      17

      For me they are working. I don’t know what’s problem on your side.

      0
      • Kevin

        Thursday, April 22nd, 2010 23:13

        18

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

        0
  • Avinash

    Thursday, April 22nd, 2010 06:32

    10

    Hi Ryan,

    This sleek Sliding look amazing man !
    I’ll try it :)
    Thanks for Share.

    ~Avinash

    0
  • willenewmedia

    Thursday, April 22nd, 2010 10:36

    9

    The link back from the demo is broken, great tut anyway!

    0
  • nashwa

    Thursday, April 22nd, 2010 04:44

    3

    This Sliding Box Effect is very nice. Thanks

    0
  • designfollow

    Thursday, April 22nd, 2010 02:02

    2

    nice effect, thank you very much.

    0
  • iNurwanto

    Thursday, April 22nd, 2010 00:46

    4

    thanks, inspiring :)

    0
  • obozdag

    Thursday, April 22nd, 2010 07:30

    5

    This is easy to implement on menus. Thanks for sharing.

    0
  • Balial tariq

    Thursday, April 22nd, 2010 09:48

    8

    really helpful. thanks

    0
  • Ryan Turki

    Thursday, April 22nd, 2010 09:18

    7

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

    0
  • Aisha

    Thursday, April 22nd, 2010 07:41

    6

    This site is amazing. Well done.

    0
  • Krzyho

    Wednesday, July 28th, 2010 19:58

    29

    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.

    0
    • Krzyho

      Thursday, July 29th, 2010 09:16

      30

      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

      0
  • renold

    Tuesday, June 1st, 2010 08:58

    28

    any one effect multiple times does not work on a single page

    0
  • Steven

    Sunday, February 20th, 2011 07:20

    31

    Great effect.

    0
  • Matt

    Sunday, December 11th, 2011 21:32

    34

    Hi, what are the steps to change the size of the images? Nice tutorial.. Thanks

    0
  • Casety

    Wednesday, June 29th, 2011 21:58

    33

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

    0
  • Alex R.

    Thursday, February 24th, 2011 20:59

    32

    jQuery is the next viral marketing pop-up. Good article,
    -Alex

    0
  • Micah Henshaw

    Monday, May 31st, 2010 11:31

    27

    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

    0
  • Tunahan Akçay

    Thursday, April 22nd, 2010 23:12

    20

    wonderful tutorial, thanks so much..

    0
  • Ed

    Thursday, April 22nd, 2010 19:19

    19

    The tutorial was written up well. Nice work.

    0
  • Jamie

    Thursday, April 22nd, 2010 23:17

    21

    Nice tutorial.

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

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 23:41

      22

      Ah Now I got it. Fixing it right now, Thanks for your input

      0
  • Web Risorsa

    Saturday, April 24th, 2010 11:25

    25

    It’s a superb work… i love this sliding effect…

    0
  • Beben

    Friday, April 23rd, 2010 15:21

    24

    its so creatif…hide pic with the we’re brand…hmmm…cool
    thanks a lot

    0
  • Deluxe Blog Tips

    Friday, April 23rd, 2010 20:43

    23

    The code looks simple and easy to understand. But the effect is impressive :). I love this tutorial. Thank you very much for sharing.

    0
  • Matt

    Sunday, December 11th, 2011 21:32

    34

    Hi, what are the steps to change the size of the images? Nice tutorial.. Thanks

    0
  • Casety

    Wednesday, June 29th, 2011 21:58

    33

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

    0
  • Alex R.

    Thursday, February 24th, 2011 20:59

    32

    jQuery is the next viral marketing pop-up. Good article,
    -Alex

    0
  • Steven

    Sunday, February 20th, 2011 07:20

    31

    Great effect.

    0
  • Krzyho

    Wednesday, July 28th, 2010 19:58

    29

    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.

    0
    • Krzyho

      Thursday, July 29th, 2010 09:16

      30

      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

      0
  • renold

    Tuesday, June 1st, 2010 08:58

    28

    any one effect multiple times does not work on a single page

    0
  • Micah Henshaw

    Monday, May 31st, 2010 11:31

    27

    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

    0
  • Web Risorsa

    Saturday, April 24th, 2010 11:25

    25

    It’s a superb work… i love this sliding effect…

    0
  • Beben

    Friday, April 23rd, 2010 15:21

    24

    its so creatif…hide pic with the we’re brand…hmmm…cool
    thanks a lot

    0
  • Deluxe Blog Tips

    Friday, April 23rd, 2010 20:43

    23

    The code looks simple and easy to understand. But the effect is impressive :). I love this tutorial. Thank you very much for sharing.

    0
  • Jamie

    Thursday, April 22nd, 2010 23:17

    21

    Nice tutorial.

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

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 23:41

      22

      Ah Now I got it. Fixing it right now, Thanks for your input

      0
  • Tunahan Akçay

    Thursday, April 22nd, 2010 23:12

    20

    wonderful tutorial, thanks so much..

    0
  • Ed

    Thursday, April 22nd, 2010 19:19

    19

    The tutorial was written up well. Nice work.

    0
  • Ryan Turki

    Thursday, April 22nd, 2010 20:53

    16

    @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.

    0
    • Sasha Endoh

      Friday, April 30th, 2010 04:55

      26

      Thanks! I figured it could be that simple, but it doesn’t hurt to ask ;)

      0
  • Adi Ulici

    Thursday, April 22nd, 2010 14:06

    15

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

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 15:23

      17

      For me they are working. I don’t know what’s problem on your side.

      0
      • Kevin

        Thursday, April 22nd, 2010 23:13

        18

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

        0
  • Sasha

    Thursday, April 22nd, 2010 18:50

    14

    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

    0
  • sarfraz raza

    Thursday, April 22nd, 2010 09:22

    13

    Beautiful Site, I really like it.

    0
  • Pooja

    Thursday, April 22nd, 2010 14:38

    12

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

    0
  • shubelal

    Thursday, April 22nd, 2010 06:46

    11

    Nice tutorials its realy very helpful
    thank you :)

    0
  • Avinash

    Thursday, April 22nd, 2010 06:32

    10

    Hi Ryan,

    This sleek Sliding look amazing man !
    I’ll try it :)
    Thanks for Share.

    ~Avinash

    0
  • willenewmedia

    Thursday, April 22nd, 2010 10:36

    9

    The link back from the demo is broken, great tut anyway!

    0
  • Balial tariq

    Thursday, April 22nd, 2010 09:48

    8

    really helpful. thanks

    0
  • Ryan Turki

    Thursday, April 22nd, 2010 09:18

    7

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

    0
  • Aisha

    Thursday, April 22nd, 2010 07:41

    6

    This site is amazing. Well done.

    0
  • obozdag

    Thursday, April 22nd, 2010 07:30

    5

    This is easy to implement on menus. Thanks for sharing.

    0
  • iNurwanto

    Thursday, April 22nd, 2010 00:46

    4

    thanks, inspiring :)

    0
  • nashwa

    Thursday, April 22nd, 2010 04:44

    3

    This Sliding Box Effect is very nice. Thanks

    0
  • designfollow

    Thursday, April 22nd, 2010 02:02

    2

    nice effect, thank you very much.

    0
  • juan iconshock

    Thursday, April 22nd, 2010 00:06

    1

    great tutorial and nice result :)

    0

Comments are closed.

54.87.156.29 - unknown - unknown - US