There are many way to make an impressive design of portfolio page . But in this post ,I want to show you one of them . Make a portfolio with images which can flip in and out to show content beyond . This effect is done with the help of Jquery Flip plugin .
Live Demo 1 |
Live Demo 2 Here is steps for making that effect .
1,Create a HTML/Javascript widget .Paste the script from steps bellow into this widget content .
2,Here is the code for each flipping image :
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="img/sponsors/google.png">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="http://www.google.com/">http://www.google.com/ </a>
</div>
</div>
</div>
The outermost
.sponsor div contains two additional div elements. The first –
sponsorFlip – contains the image. The second -
sponsorData - contains the caption for image and a URL . At the beginning ,
sponsorData div is hidden from view ,so we see only image in
sponsorFlip div .Every click on this element causes the Flip effect to be initiated, when the flipping animation is complete, the contents of
sponsorData div is dynamically inserted into
sponsorFlip.
3,Now we need to add some CSS to format elements :
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
.sponsorFlip img{
/* Centering the logo image in the middle of the .sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
4,The Jquery :
This plugin need Jquery and Jquery UI framework as well .So we need to include them into our page with these code:
<script type="text/javascript" src="...../jquery-ui.js"></script>
<script type="text/javascript" src="...../jquery.js"></script>
After including two frameworks above into our page ,we add this script to trigger the effect :
<script>
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
</script>
Save the widget and you are done . To add more images and link ,just duplicate the div elements in step 2 as many as you want .
This effect is very cool and I think it will made your homepage so impressive to readers . In step 2 ,instead of write div elements manually ,you can use xml data feed or php code to read data from database .
Check out my demo for using javascript to read xml feed and show it up with flip effect .
