In this tutorial, i will explain the concept and ways of making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.
Concept
Depending on whether you wish to fold away your content or you wish to fold out your content. Folding in your content will be to pull up the content and slide it outward while folding out your content will be to push your content out and slide it downwards. There are two way of achieving this effect. One is to use the viewport technique which will lengthy your code and complex your stuff but generally give you a better visualize effect than the next effect. The next effect that can achieve this with only few lines of code is typically using CSS and animate function in jQuery.
Coding
On the HTML part, you will most likely will only required the following set of div block
<div class='image' id='box1'></div> <div class='image' id='box2'></div> <div class='image' id='box3'></div> <div class='image' id='box4'></div>
On the CSS coding, you will most likely need the following
body{
margin: 0 auto; /*align the header at the center*/
text-align: center; /*align the header at the center*/
}
div.image
{
width: 600px; /* width of each container*/
height: 350px; /* height of each container*/
position: absolute; /* instructure each container to obey the position absolutely*/
float: left; /* float all the container so that they overlapped each other*/
left: 27%; /* align them to the center of the screen */
z-index: -1;
}
div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}
The above codes are similar to the opening door effect tutorial i did previously.
On the jQuery coding,
$(function(){
var i = -1;
$('div.image').click(function(){
$(this)
.animate({height: 50+'px'}, 500)
.animate({width: 0+'px'}, 500, function(){$(this).css('z-index', i);
$(this).css({height: 350+'px', width: 600+'px'});});
i--;
});
})
this is all you required. What i did is basically add an event handler to each div block and perform an animate function to adjust the height of the effect to a certain visible amount and slide the height to 0 once the height animate has completed which will gives us a nice fold effect. Once the fold effect has been completed, i push the image back to the queue by setting its z-index and return its original size. This way is much better than using a view port which will block the next image and create a not very impressive fold effect.
You can visit the demo site for this fold effect tutorial. The tutorial files can be retrieve from jquery-fold-effect-tutorial
Nice effect!
Is there a was I could set it up to play automatically when the page loads. Would I modify the area where the .click is called and change it to something else?
Thanks much, great work!
Eric
Hey Eric,
You are correct, you will need to modify the code a bit. In order for it to automatically run through instead of manually click, you will need to use setInterval(). You can try the code below, just replace this demo code with the below code and it will run automatically when page loaded.
$(function(){
setInterval(repeatThisEffect, 2000);
})
var i = -1;
var myImage = $('div.image');
var totalImg = $('div.image').length;
var repeatThisEffect = function(){
var currentImg = myImage[totalImg-1];
$(currentImg)
.animate({height: 50+'px'}, 500)
.animate({width: 0+'px'}, 500, function(){$(currentImg).css('z-index', i);
$(currentImg).css({height: 350+'px', width: 600+'px'});});
i--;
totalImg--;
if(totalImg < 0) totalImg = $('div.image').length; }
Since we can't use 'this' anymore (we don't know which 1 is 'this' as there are no one clicking the image anymore) so we have to manually loop through and since it is a stack (first in last out) so box 4 will be at the top. Therefore, we will start with the total amount of image until it reaches -1 and reset back to total image. Good luck!
Thanks Clay that worked!