Create a diagonal rotation with CSS transitions and jQuery
This article shows us how to turn an unordered list into a
rotating diagonal portfolio with CSS3 and jQuery.
One of the hardest tasks any designer undertakes is the
creation of his or her own site. It has to be interesting, informative,
unique and show the work well. All this while satisfying the toughest
critic, yourself. What set it apart for me was a
combination of simple design, extreme focus and technical interest.
I wanted to spend some time on an
element that had some technical challenge and integrated well with the
site. The diagonal rotating portfolio brought the excitement of taking
on a new challenge and paired it with an overall fun way to display
content without sacrificing usability. One of the restraints removed
from a personal site is dealing with older browsers. Your past work
speaks to your ability to code for the IE7s of the world, so your site
can really experiment with what’s fresh. So, let’s dig in and create a
diagonal rotation with CSS3 and jQuery.
Semantics and setup
We
start with minimal markup. Always make your markup as simple as
possible; don’t duplicate elements unless absolutely necessary. Markup
should be a semantic outline of your content. With that in mind, here’s
all the markup we need:
There is one simple unordered list of images for the portfolio. A
class of “feature” is applied to the list item housing the current
highlighted image. That’s it for the HTML, let’s give this list some
style.
Create only the large form of your images and use CSS to scale down. In this case all the images are 600 x 300.
}
ul.portfolio li.feature img{
height:300px;
width:600px;
}
This is applying a series of styles to the list item with the
“feature” class to override the inherited styles, and also create the
other end of the transition. The negative rotation is canceling out the
initial rotation of the list. Setting a high z-index will place this
image above the other images in the list, don’t forget the relative
positioning to help z-index. We’re also increasing the opacity and size.
The result is a really unique list of images ready for action.
Scripting
Now
that we have everything set up and looking nice, it’s time to get
moving. Take time to set up jQuery, then we’re ready to go. Since the
transitions are already coded into the CSS, we only need a small amount
of jQuery to make this work.
Our transitions are dependent on the feature class, so we use jQuery to switch classes on click. Here’s the code:
$(document).ready(function(){
$('.portfolio li').click(function(){
var new_feature = $(this);
if(!new_feature.hasClass('feature')){
$('li.feature').removeClass('feature');
setTimeout(function(){
new_feature.addClass('feature');
},500);
}
});
});
We start with the click function. Once a list item is clicked, we want to make sure it isn’t already the current li.
After we know it’s a new one, we remove the feature class from the old
list item. This causes a transition to occur shrinking and rotating the
element back into the structure of the list.
The setTimeout
function allows the transitions to occur sequentially as opposed to
simultaneously. Once the first event is complete, the clicked li begins to grow and rotate into the values of the feature class. The change in features is complete.
Once
you get the basics of the transitions down you can experiment with
other properties. You can fade in information about the feature elements
or add in next and previous buttons, even apply keyboard shortcuts. The
combination of jQuery and CSS3 is a strong partnerships that leaves the
door for creativity wide open.
This is just a small step into the world of CSS transitions. Just in the past week I’ve seen amazing examples like beta.theexpressiveweb.com.
It’s a great time to be involved in front-end development. I would love
to see what you come up with, don’t hesitate to email your experiments.
Really nice creation I have seen here which is shared by you.
ReplyDelete