The Inspiration
A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.
After digging around I came across thunderfuel’s website and was like “OMG, I must make that” and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.
The HTML
As always, I am using a definition list:
-
<dl id=“portfolio”>
-
<img src=“smallerImage.jpg” alt=“cubes still life” />
-
<a href=”>Domain.com</a>
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-
</dt>
-
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
-
<img src=“biggerImage.jpg” alt=“cubes still life” />
-
-
</dd>
-
<!– more piece adding up to an even number –>
-
</dl>
The CSS
Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:
-
#portfolio{position:relative;width:850px;height:450px;margin:0;padding:0;overflow:hidden;}
-
#portfolio dd{position:absolute;left:250px;top:-455px;width:330px;height:430px;margin:0;padding:0;background:#666600;padding:10px;}
-
#portfolio dd h3{font:bold 15px Georgia, “Times New Roman”, Times, serif;color:#fff;margin-bottom:0;}
-
#portfolio dd h4{font:bold 13px Georgia, “Times New Roman”, Times, serif;color:#fff;margin-bottom:0;margin-top:0;}
-
#portfolio dd p{font:11px Geneva, Arial, Helvetica, sans-serif;}
-
#portfolio dd img{display:block;margin:0 auto;border:3px solid #999999}
-
.dt{width:240px;height:65px;background:#808040;font:11px Geneva, Arial, Helvetica, sans-serif;padding:5px;margin:0;}
-
.dt img{border:2px solid #fff;height:55px;width:55px;float:left;margin-right:5px;}
-
.dt a{display:block;color:#fff;font:bold 13px Georgia, “Times New Roman”, Times, serif;padding-bottom:5px;text-decoration:none;}
-
.dt.left{position:absolute;left:0px;}
-
.dt.right{position:absolute;right:0px;}
The JavaScript
I am using the the easing plugin in my example so be sure to grab that also:
-
<script type=“text/javascript” src=“jquery-1.2.6.min.js”></script>
-
<script type=“text/javascript” src=“jquery.easing.1.3.js”></script>
Here is the actual code being used:
-
<script type=“text/javascript”>
-
$(document)
-
.ready(function(){
-
var hght = 0;
-
$(‘dt’)
-
.addClass(‘dt’)
-
.each(function(i){
-
if( i % 2 ){
-
$(this).addClass(‘left’).css(‘top’,hght);
-
hght += 75;
-
}
-
else{
-
$(this).addClass(‘right’).css(‘top’,hght);
-
}
-
})
-
.click(function(){
-
if( $(‘#portfolio dd:animated’).size() ) return false;
-
var that = $(this);
-
$(‘#portfolio dd.showing’)
-
.animate({top:-455}, 750, ‘easeInBack’, function(){
-
$(this).removeClass(’showing’);
-
that.next().animate({top:0}, 750, ‘easeOutBounce’).addClass(’showing’);
-
});
-
})
-
.eq(0)
-
.next()
-
.animate({top:0}, 750, ‘easeInOutSine’).addClass(’showing’);
-
});
-
</script>
The Improvements
So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?
Be all mean, let me know what you come up with.
The Inspiration
A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.
After digging around I came across thunderfuel's website and was like "OMG, I must make that" and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.
The HTML
As always, I am using a definition list:
-
<dl id="portfolio">
-
<img src="smallerImage.jpg" alt="cubes still life" />
-
<a href=''>Domain.com</a>
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-
</dt>
-
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
-
<img src="biggerImage.jpg" alt="cubes still life" />
-
-
</dd>
-
<!-- more piece adding up to an even number -->
-
</dl>
The CSS
Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:
-
#portfolio{position:relative;width:850px;height:450px;margin:0;padding:0;overflow:hidden;}
-
#portfolio dd{position:absolute;left:250px;top:-455px;width:330px;height:430px;margin:0;padding:0;background:#666600;padding:10px;}
-
#portfolio dd h3{font:bold 15px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;}
-
#portfolio dd h4{font:bold 13px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;margin-top:0;}
-
#portfolio dd p{font:11px Geneva, Arial, Helvetica, sans-serif;}
-
#portfolio dd img{display:block;margin:0 auto;border:3px solid #999999}
-
.dt{width:240px;height:65px;background:#808040;font:11px Geneva, Arial, Helvetica, sans-serif;padding:5px;margin:0;}
-
.dt img{border:2px solid #fff;height:55px;width:55px;float:left;margin-right:5px;}
-
.dt a{display:block;color:#fff;font:bold 13px Georgia, "Times New Roman", Times, serif;padding-bottom:5px;text-decoration:none;}
-
.dt.left{position:absolute;left:0px;}
-
.dt.right{position:absolute;right:0px;}
The JavaScript
I am using the the easing plugin in my example so be sure to grab that also:
-
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
-
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Here is the actual code being used:
-
<script type="text/javascript">
-
$(document)
-
.ready(function(){
-
var hght = 0;
-
$('dt')
-
.addClass('dt')
-
.each(function(i){
-
if( i % 2 ){
-
$(this).addClass('left').css('top',hght);
-
hght += 75;
-
}
-
else{
-
$(this).addClass('right').css('top',hght);
-
}
-
})
-
.click(function(){
-
if( $('#portfolio dd:animated').size() ) return false;
-
var that = $(this);
-
$('#portfolio dd.showing')
-
.animate({top:-455}, 750, 'easeInBack', function(){
-
$(this).removeClass('showing');
-
that.next().animate({top:0}, 750, 'easeOutBounce').addClass('showing');
-
});
-
})
-
.eq(0)
-
.next()
-
.animate({top:0}, 750, 'easeInOutSine').addClass('showing');
-
});
-
</script>
The Improvements
So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?
Be all mean, let me know what you come up with.
