How to Create Sleek Sliding Box Effect With jQuery

Posted in Tutorials 662 days ago • Written by:

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

Create a root folder and choose a name for it, mine is SlidingBoxes.
In the root folder create a HTML file and name index.html, a css file and a js file.
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.

For Further Reading:

First Steps in Creating a Web Design Business

A Quick Introduction to Ruby on Rails

Put Your Website on a Diet with Minifiers

How To Charge More As a Freelancer

Did you enjoy this article and found it useful?

Get even more from us:

Follow @1stwebdesigner

Get Our RSS Feed

Article was created by 1STWD Editorial

Articles

Visit 1STWD Editorial's Website | Follow 1STWD Editorial On Twitter

36 Brilliant Comments - Join Discussion Now!

Krzyho
Posted 565 days ago
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.

Reply

Krzyho
Posted 564 days ago
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

Reply

renold
Posted 622 days ago
28

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

Reply
Micah Henshaw
Posted 623 days ago
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

Reply
Web Risorsa
Posted 660 days ago
25

It’s a superb work… i love this sliding effect…
.-= Web Risorsa´s last blog ..SEO Best Practices – Video Cast =-.

Reply
Deluxe Blog Tips
Posted 661 days ago
24

The code looks simple and easy to understand. But the effect is impressive :). I love this tutorial. Thank you very much for sharing.
.-= Deluxe Blog Tips´s last blog ..Random Posts Widget For Blogger =-.

Reply
Beben
Posted 661 days ago
23

its so creatif…hide pic with the we’re brand…hmmm…cool
thanks a lot
.-= Beben´s last blog ..HTML YA HTML =-.

Reply
Jamie
Posted 662 days ago
21

Nice tutorial.

p.s. the “return to tutorial” link on the demo page appears to be broken.
.-= Jamie´s last blog ..AutoTweet V 1.01 =-.

Reply

Saad Bassi
Posted 661 days ago
22

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

Reply

Tunahan Akçay
Posted 662 days ago
19

wonderful tutorial, thanks so much..

Reply
Ryan Turki
Posted 662 days ago
18

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

Reply

Sasha Endoh
Posted 654 days ago
26

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

Reply

Ed
Posted 662 days ago
17

The tutorial was written up well. Nice work.
.-= Ed´s last blog ..Mike Chambers on iPhone’s Flash Application Restrictions =-.

Reply
Sasha
Posted 662 days ago
16

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

Reply
Pooja
Posted 662 days ago
14

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

Reply
Adi Ulici
Posted 662 days ago
13

Nice tutorial and very easy to implement.
(P.S. Watch out, the back link from the demo page is not working)
.-= Adi Ulici´s last blog ..P.S. Ma casatoresc! =-.

Reply

Saad Bassi
Posted 662 days ago
15

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

Reply

Kevin
Posted 662 days ago
20

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

Reply

willenewmedia
Posted 662 days ago
12

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

Reply
Balial tariq
Posted 662 days ago
11

really helpful. thanks
.-= Balial tariq´s last blog ..30+ Incredible & Wonderful Sand Sculptures =-.

Reply
sarfraz raza
Posted 662 days ago
10

Beautiful Site, I really like it.
.-= sarfraz raza´s last blog ..Create Dynamic Character & Background Animation With Spritely =-.

Reply
Ryan Turki
Posted 662 days ago
9

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

Reply
Aisha
Posted 662 days ago
8

This site is amazing. Well done.
.-= Aisha´s last blog ..30+ Incredible & Wonderful Sand Sculptures =-.

Reply
obozdag
Posted 662 days ago
7

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

Reply
shubelal
Posted 662 days ago
6

Nice tutorials its realy very helpful
thank you :)

Reply
Avinash
Posted 662 days ago
5

Hi Ryan,

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

~Avinash
.-= Avinash´s last blog ..AforAvi: @jackbliss99 you’re welcome ! =-.

Reply
nashwa
Posted 662 days ago
4

This Sliding Box Effect is very nice. Thanks

Reply
designfollow
Posted 662 days ago
3

nice effect, thank you very much.

Reply
iNurwanto
Posted 662 days ago
2

thanks, inspiring :)
.-= iNurwanto´s last blog ..K’naan – Wavin Flag Lyrics (ost FIFA World Cup 2010) =-.

Reply
juan iconshock
Posted 662 days ago
1

great tutorial and nice result :)

Reply