Advertisment
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 /> <link rel="stylesheet" type="text/css" href="style.css" /><br />
Now we’ll attach the latest version of jQuery from Google’s AJAX Libraries repository:
</p> <p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />
And now the last thing is our javascript file :
</p> <p><script type="text/javascript" src="script.js"></script><br />
Now our header should look this:
<strong><br /> </strong><br /> <head><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><br /> <script type="text/javascript" src="script.js"></script><br /> <link rel="stylesheet" type="text/css" href="style.css" /><br /> </head><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 /> <div id="top-left" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div></p> <p><div id="top-center" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div></p> <p><div id="bottom-center" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div></p> <p><div id="left" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div></p> <p><div id="right" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div></p> <p><div id="top-right" class="wrap"><br /> <img src="img/back.jpg" /><br /> <img src="img/front.jpg" class="front" /><br /> </div><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 :
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.
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.
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
[...] Tutorial Tutorial Page [...]
[...] [...]
[...] | İndir | Dökümanları için Sliding [...]
[...] Sleek Sliding Box Effect – jQuery This pedagogic tutorial by Ryan Turki will teach you how to create some representative and nice [...]
any one effect multiple times does not work on a single page
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
[...] How to Create Sleek Sliding Box Effect With jQuery [...]
The demo does not appear to be working.
[...] 24.How to Create Sleek Sliding Box Effect With jQuery [...]
Nice man! Best jQuery-Sliding-Boxes Tutorial i found yet!
.-= blinkblank´s last blog ..WELT KOMPAKT und WELT morgen mit leerem Titelblatt =-.
[...] How to Create Sleek Sliding Boxes With jQuery [...]
It’s a superb work… i love this sliding effect…
.-= Web Risorsa´s last blog ..SEO Best Practices – Video Cast =-.
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 =-.
its so creatif…hide pic with the we’re brand…hmmm…cool
thanks a lot
.-= Beben´s last blog ..HTML YA HTML =-.
[...] View full post on Graphic and Web Design Blog [...]
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 =-.
Ah Now I got it. Fixing it right now, Thanks for your input
wonderful tutorial, thanks so much..
@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.
Thanks! I figured it could be that simple, but it doesn’t hurt to ask ;)
IVE GOT STUCK WITH CHANGING THEM INTO DIVS HOW TO PLZ
Very cool jQuery effect. Thanks for the guide!
The tutorial was written up well. Nice work.
.-= Ed´s last blog ..Mike Chambers on iPhone’s Flash Application Restrictions =-.
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
[...] You may continue to source Graphic and Web Design Blog [...]
Hi,
This sliding box effect is very nice , i like it so much.
Thanks a lot sharing this information with us.
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! =-.
For me they are working. I don’t know what’s problem on your side.
Saad, It is not working. I just checked it as well. When you view the demo, the backlink ends up on a 404.
The link back from the demo is broken, great tut anyway!
really helpful. thanks
.-= Balial tariq´s last blog ..30+ Incredible & Wonderful Sand Sculptures =-.
Beautiful Site, I really like it.
.-= sarfraz raza´s last blog ..Create Dynamic Character & Background Animation With Spritely =-.
Thanks guys, If anyone needs any support or clarification just add a comment and I will reply to you !
This site is amazing. Well done.
.-= Aisha´s last blog ..30+ Incredible & Wonderful Sand Sculptures =-.
This is easy to implement on menus. Thanks for sharing.
Nice tutorials its realy very helpful
thank you :)
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 ! =-.
This Sliding Box Effect is very nice. Thanks
[...] to follow along with the source files, you can download them by clicking here (*.zip archive) view post You can leave a response, or trackback from your own [...]
nice effect, thank you very much.
thanks, inspiring :)
.-= iNurwanto´s last blog ..K’naan – Wavin Flag Lyrics (ost FIFA World Cup 2010) =-.
[...] along with the source files, you can download them by clicking here (*.zip archive). [...]. [...] Read the full article at the source. Share CSS/HTML css, development, jquery, slide, tutorial, tutorials The 3 Most [...]
great tutorial and nice result :)