Thursday, January 19, 2012

Create a diagonal rotation with CSS transitions and jQuery

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:
  1. <ul class="portfolio">
  2.         <li><img src="img/portfolio-1.jpg" alt="Image 1"></li>
  3.         <li><img src="img/portfolio-2.jpg" alt="Image 2"></li>
  4.         <li class="feature"><img src="img/portfolio-3.jpg" alt="Image 3"></li>
  5.         <li><img src="img/portfolio-4.jpg" alt="Image 4"></li>
  6.         <li><img src="img/portfolio-5.jpg" alt="Image 5"></li>
  7. </ul>
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.

  1. }
  2.  
  3.         ul.portfolio li.feature img{
  4.                 height: 300px;
  5.                 width: 600px;
  6.         }
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:
  1. $(document).ready(function(){
  2.        
  3.         $('.portfolio li').click(function() {
  4.                
  5.                 var new_feature = $(this);
  6.                
  7.                 if (!new_feature.hasClass('feature')){
  8.                
  9.                         $('li.feature').removeClass('feature');
  10.                
  11.                         setTimeout(function(){
  12.  
  13.                                 new_feature.addClass('feature');
  14.  
  15.                         }, 500);
  16.                 }
  17.         });
  18. });
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.

1 comment: