There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Slider Behaviour

The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.

We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.

Markup & Styling

We will create a listing of images using unordered list and create a single div for wrapper, this wrapper will be used to display our portfolio image in grid style and will be generated using JavaScript so it will left blank. In this tutorial I’m using awesome image from dribbble posted by Troy Cummings, J.R. Schmidt and Dan Lehman.

The wrapper markup will contains single div for image wrapper and also a single span for image title, following markup are example of the result after generated using JavaScript :

  
 Dump Truck
  
 Rrwooo
  

The portfolio image will be displayed with grid, we’ll also styling the span with transparent black background and div with box-shadow and transform-style. Since the portfolio listing doesn’t needed to display we’ll also set its display to none.

  #portfolio-item {
    display: none;
  }
  
  #portfolio {
    margin: 2em 0 1em;
    transform-style: preserve-3d;
  }

  #portfolio div {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: 1em;
    width: 200px;
    height: 150px;
    box-shadow: 0px 0px 25px rgba(0,0,0,.3);
  }
  
    #portfolio div span {
      text-align: left;
      position: absolute;
      color: #fff;
      background: rgba(0,0,0,0.6);
      width: 90px;
      padding: 5px 15px 7px;
      z-index: 1;
      left: -10px;
      bottom: 10px;
    }

The image we’ll set as background image for the div, so when flipping the image it’s not flipping the img but the div and change it’s background-image value with new one.

We also will create a class that have CSS animation, this class will be injected to when flipping the div. The last class we will also create are the four effect classes.

  .animated {
    transition: .9s ease-out;
  }
  
  .flipped-horizontal-right {
    transform: rotateY(360deg);
  }
  
  .flipped-horizontal-left {
    transform: rotateY(-360deg);
  }
  
  .flipped-vertical-top {
    transform: rotateX(360deg);
  }
  
  .flipped-vertical-bottom {
    transform: rotateX(-360deg);
  }

Here’s the expected result :

JavaScript

First to go is iniatilizing some variables we need on flipping and change the image also populating image to display. On populating the image, we will walk through the portfolio listing and make them as background image for the div, when it’s done they will be appended to portfolio div.

itemShow         = 8;
indexedItemShow  = itemShow - 1
itemList         = $('#portfolio-item');
itemWrapper      = $('#portfolio');
rotation         = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right'];
navigation       = $('#navigation a');

for( var i = 0; i < itemShow; i++ ) {
  
  itemImage    = itemList.children('li:eq(' + i + ')').children('img');
  itemSrc      = itemImage.attr('src');
  itemAlt      = itemImage.attr('alt');
  item       = '
 ' + itemAlt + '
';
  itemWrapper.append(item);
}

When our navigation clicked it will rotate each div on our portfolio wrapper using effect we’ve initialize before and choosen randomly using Math.random(), to rotate them we’ll inject animated class name and selected effect.

navigation.on('click', function(e) {
    
  e.preventDefault();

  navigation.removeClass('selected');
  $(this).addClass('selected');
    
  page = $(this).attr('data-page');

  for( var i = 0; i <= indexedItemShow; i++ ) {

    random     = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
    animation  = rotation[random];
      
    item       = itemWrapper.children('div:eq(' + i + ')');

    item.addClass('animated ' + animation);
  
    /* to next code */
  }
});

When it's running it will also walk through to select the portfolio listing based on its index related to current selected page. On each selected portfolio listing it will grab it's image title (alt value) along with its src value, each of them will be change current each div value on our portfolio wrapper.

window.setTimeout(function (index) {
  return function () {

    indexReal    = (page == 1) ? index : (index + (page - 1)) ;
    itemHost     = indexReal + (indexedItemShow * (page - 1));

    itemImage    = itemList.children('li:eq(' + itemHost + ')').children('img');
    itemSrc      = itemImage.attr('src');
    itemAlt      = itemImage.attr('alt');
    itemCurrent  = itemWrapper.children('div:eq(' + index + ')');

    itemCurrent.css('background', 'url(' + itemSrc + ')');
    itemCurrent.children('span').text(itemAlt);
    };
} (i), 500);

When the animation done we'll remove the animated and effect class name on each div.

item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
  $(this).removeClass();
});

Done

We're done, as I described before that the flipping will take an action when user clicked the pagination. Try to visit the demo link above to see them live. Enjoy!

Focus on showcasing our product features can be a good choice for attracting user on landing pages. By showcasing in 3D style also a good choice, in this tutorial I am going to share how to showcase our product feature in 3D style using CSS3 3D Transform and jQuery.

Showcase Behaviour

The showcase will be displaying product image and tagline. The tagline will be positioned in the middle of product image, so there will be product image in two positions, left and right of the tagline. These images will be rotated in 3D around y-axis with angle of rotation -35 degree for the left image and 35 degree value for the right, the image will be rotated like following image :

Each product image will have two images and those images will be stacked each other also each of them will have infinite bouncing effect. The last effect will be rotation to the left and right on all of product image and tagline, this aim to show our rotated image its normal state before rotated.

The Markup & Styling

The product image and tagline wrapped by a single div named wrapper-item while the product image itself wrapped by a div named left and right. All of them will wrapped also by a single div named container, this div will control our 3D perspective. In this tutorial I’m using some of themify themes for the product image.

  

    

      
      
    
    Lot of awesome themes! 
 Download the lovely one! 
    

      
      
    
  
  

The container div will have 2000px perspective and our wrapper-item will have preserve-3d. For product image on the left we transform them into -35 degree angle and 35 degree for product image on the right.

#container {
  margin: 0 auto;
  overflow: hidden;
  width: 1100px;
  max-width: 1100px;
  perspective: 2000px;
}

  .wrapper-item {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 400px;
    margin-bottom: 3em;
    transform-style: preserve-3d;
  }
  
  .left img, 
  .right img {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0px 10px 25px rgba(0,0,0,.3);
  }
  
  .left img {
    transform: rotate3d(0,1,0,-35deg);
  }
  
  .right img {
    transform: rotate3d(0,1,0,35deg);
  }

Here is the result :

Animation

Each product image will have bouncing animation with infinite loop. To make it more attractive we add delay for each second image both on the left and right. We’ll create a keyframe named bouncing-left and bouncing-right and add them on the product image and also positioning them.

.left img:nth-child(1) { 
  left: 4em; 
  top: 8em; 
  animation: bouncing-left 2s ease-in-out infinite alternate both;
}
  
.left img:nth-child(2) { 
  left: -2em; 
  top: 12em; 
  animation: bouncing-left 2s ease-in-out infinite alternate both;
  animation-delay: .5s;
}
  
.right img:nth-child(1) { 
  right: 4em; 
  top: 8em; 
  animation: bouncing-right 2s ease-in-out infinite alternate both;
}
  
.right img:nth-child(2) { 
  right: -2em; 
  top: 12em; 
  animation: bouncing-right 2s ease-in-out infinite alternate both;
  animation-delay: .5s;
}

@keyframes bouncing-left {
  0% { transform: translateY(-10px) rotate3d(0,1,0,-35deg); }
  100% { transform: translateY(10px) rotate3d(0,1,0,-35deg); }
}   

@keyframes bouncing-right {
  0% { transform: translateY(-10px) rotate3d(0,1,0,35deg); }
  100% { transform: translateY(10px) rotate3d(0,1,0,35deg); }
}  

We also add rotation animation on the wrapper-item, the rotation will rotate start from 0 degree to 35 degree then rotate to -35 degree and back to 0 degree. This animation will only move 3 times and delayed for 3 seconds on start.

.wrapper-item {
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 400px;
  margin-bottom: 3em;
  transform-style: preserve-3d;  
  transition: .5s ease-in-out;
  animation: rotating 10s ease-in-out 3 alternate both;
  animation-delay: 3s;
}

@keyframes rotating {
  0% { transform: rotate3d(0,1,0,0deg); }
  30% { transform: rotate3d(0,1,0,35deg); } 
  60% { transform: rotate3d(0,1,0,-35deg); } 
  100% { transform: rotate3d(0,1,0,0deg); }
}

Our product showcase will be like following image :

Navigation

Since we have more than one product feature we need to create a navigation for displaying each product feature. The first product feature will be displayed on page load and other will be hidden, when navigation clicked the hidden one will be displayed with fade in effect. This will be done with JavaScript with jQuery help.

$(document).ready(function() {
  
  //Show only first wrapper
  $( '.wrapper-item:not(:first-child)' ).hide();
  
  //Navigation on click
  $( '.nav' ).on( 'click' , function() {
    
    this_index = parseInt($(this).index()) + 1;
    
    $( '.nav' ).removeClass( 'selected' ).end().find( this ).addClass( 'selected' );

    $( '.wrapper-item' ).hide();
    $( '.wrapper-item:nth-child(' + this_index + ')' ).fadeIn( 'fast' );
    
  } );
});

The script above tell that if one of nav item clicked it will display the hidden product feature according to its index and hide others.

Finish

Our showcase for product feature is done, with CSS3 3D transform and animation we can enhance our showcase style like we done before. Please enjoy!

When playing the Galaxy Tab I love the fanciness of its Android’s dock. The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style. In this tutorial we’re going to create them using jQuery and CSS3.

Our Dock Behaviour

As I described before, when user click the arrow image on the dock the icon will consecutively pop out from bottom, it’s hidden behind the dock itself. Along with animation of the icon pop out, the dock also rotating vertically from top to bottom direction with 3D style. So it will looks like the dock push the icon up.

When user click the arrow image once more it dock will looks like pull down the icon to the bottom, the icon will animated pop in and the dock will rotating from bottom to top direction.

The Technique

All of the technique we will use have been used on previous tutorial. For 3D rotating like cube we will use the technique on “Creating “Next Level” Search Form Using jQuery & CSS3″ post while the consecutive movement of the icon we will use the technique on “Creating Consecutive Slide Using jQuery” post. If you missed both of them, please do me a favor by reading them before continue reading this post.

The Markup & Styling

The dock and the icon wrapped by a div called dock-wrapper, it will take on the 3D perspective and the dock position. The dock will consist two div called dock-front and dock-top, both of them will act like a cube. The last element is a single div called item, it will wrap all icon that will pop out later. In this post I am using icon from some application that available on Google Play.

First to go is styling the dock, we will set the perspective on the dock-wrapper and set the position to the bottom of the page. Set dock-front and dock-top transformation and the background. We’ll also add a little animation when user hovering the arrow. Last, we prepare class called .dock-show that will be injected to .dock using JavaScript to force the animation on it.

#dock-wrapper {
  bottom: 0;
  width: 100%;
  height: 60px;
  position: fixed;
  perspective: 3000px;
}
  
  .dock {
    height: 70px;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .dock-show {
    transform: translateZ(-25px) rotateX(-95deg);
  }
  
  .dock-front, .dock-top {
     position: absolute;
     display: block;
     width: 100%;
     height: 40px;
     padding: 10px 0;
     box-shadow: 0px -3px 6px rgba(0,0,0,0.3);
  }
  
  .dock-front {
     background-image: linear-gradient(to bottom, #434345, #161616);
     transform: translateZ(30px);
  }
  
  .dock-top {
	  background-image: linear-gradient(to bottom, #505052, #161616);
     transform: rotateX(90deg) translateZ(29px);
  }
    
  #arrow-up, #arrow-down {
    cursor: pointer;
    transition: all .2s;
  }
    
    #arrow-up:hover {
    	margin-top: -.2em;
    }
    
    #arrow-down:hover {
    	margin-top: .2em;
    }

After styling dock done, now we’ll stying the icon. The icon will hidden behind the dock and each icon will have absolute position to make us ease moving them when pop out by playing its top position.

.item {
  position: absolute;
  width: 526px;
  left: 50%;
  margin-left: -263px;
}	
   
  .item span {
    position: absolute;
    z-index: -1;
    cursor: pointer;
  }
    
  .item span:first-child  { left: 0; }
  .item span:nth-child(2) { left: 90px; }
  .item span:nth-child(3) { left: 180px; }
  .item span:nth-child(4) { left: 270px; }
  .item span:nth-child(5) { left: 360px; }
  .item span:nth-child(6) { left: 450px; }

Final result of our dock :

The JavaScript

When user click the arrow we will inject .dock-show class name to .dock to make the animation working. After injecting we will moving each icon position to top above the dock, making it visible to the user.

item         = $('.item img');
itemReverse  = item.get().reverse();
  
$('#arrow-up').on('click', function() {
  
  $('.dock').addClass('dock-show');
  
  $.each(item, function() {
    
    var i  = $(this).index();
    var delay = i * 100;

    window.setTimeout(function (index) {
      return function () {
        item.eq(index).stop().animate({ 'top' : '-7.8em' });
      };
    } (i), delay);
  });
});

When user click the arrow once more after the icon appear, we will hide the icon along with rotating the dock.

$('#arrow-down').on('click', function() {
  
  $('.dock').removeClass('dock-show');
  
  $.each(itemReverse, function() {
    
    var i  = $(this).index();
    var delay = i * 100;

    window.setTimeout(function (index) {
      return function () {
        $(itemReverse).eq(index).stop().animate({ 'top' : '0' });
      };
    } (i), delay);
  });
});

Last step add animation for the icon when user hover it, playing its top position.

$('.item img').hover(function() {
  $(this).stop().animate({ 'top' : '-8.4em' }, 'fast');
}, function() {
  $(this).stop().animate({ 'top' : '-7.8em' }, 'fast');
});

We’re Done

The dock is finished but you can enhance the dock more by add tooltip when user hover the icon. That’s it hope you enjoy this post.

There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. In this tutorial I’m going to share how to show our product information with cube style using CSS3 3D Transform.

The Result

Before talking about the technique following image is the result we want to achieve, the product image is visible while the product information is hidden. When user hovering the item both of them will rotate vertically to up direction making the product information visible and the image hidden, looks like a rotating cube.

The Technique

The technique we will use for creating the cube is from previous technique we’ve done before (see : Creating “Next Level” Search Form Using jQuery & CSS3) There are two elements, front side and bottom side, front is product image and product information is bottom side. The bottom side is hidden by rotating its X axis to -90 degree and playing the translateZ value to make its position below the front.

There are two elements wrapping them, first named wrapper for setting the perspective this aims to define how far the element placed relatively from user view, the smaller value the element will placed closer. Second element named item also wrapped by wrapper is wrapping the image and information, this element when having an hover event will rotate its X axis to 95 degree to show the information and hide the image.

The Markup & Styling

I’m using all images from Shopify App Store for product image. Each product will have two wrapper elements and a single information element as described before, here is the markup :

  

    
    
      Contact Form The easiest way to add a contact form to your shop.
    
  

Each wrapper will have inline-block display and perspective value to 4000px, item will have preserve-3d on transform-style value to make its children preserve its 3D position and also having transition property to make the change when hovering animated.

.wrapper {
  display: inline-block;
  width: 310px;
  height: 100px;
  vertical-align: top;
  margin: 1em 1.5em 2em 0;
  cursor: pointer;
  position: relative;
  font-family: Tahoma, Arial;
  perspective: 4000px;
}

.item {
  height: 100px;
  transform-style: preserve-3d;
  transition: transform .6s;
}

Product image and product information will have transition, both of them will change its border-radius and box-shadow value when user hovering, this aim to make the transition more elegant.

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transform: translateZ(50px);
  transition: all .6s;
  
}

.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: linear-gradient(to bottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  transform: rotateX(-90deg) translateZ(50px);
  transition: all .6s;
  
}

And the last is when user hover our product, it will rotate the item element and change image and information’s border-radius and box-shadow.

.item:hover {
  transform: translateZ(-50px) rotateX(95deg);
}

  .item:hover img {
    box-shadow: none;
    border-radius: 15px;
  }
  
  .item:hover .information {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    border-radius: 3px;
  }

The result :

Finish

We’re done, the cube transition should work on browser that support 3D transform. I also add script detection using modernizr to check browser capability. Enjoy!

On a single page website with fixed position navigation, it will be nice to tell user on what section they are reading at. In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.

The Trick

We can estimate which section the users are reading at by checking their current scroll position and get closest section from it. This mean we have to separate each section by element that we can identify as a different section. To make us ease on creating an auto focus on the navigation related to the section user reading at, we can put the same identity on section and navigation, respectively.

Building The Page

The single page we want to create consists of navigation and section. Each of them has five items, home, about, blog, contact, credits. Home on navigation related to home on section, so on. Each item on navigation identified using href attribut which is the same value as section that identified by id attribute.

	

		Walking Navigation
		

			
Home
			
About
			
Blog
			
Contact
			
Credits
		
	


	

		content
	
	

		content
	
	

		content
	
	

		content
	
	

		content
	

#header-wrapper {
	display: block;
	position: fixed;
	width: 100%;
	height: 60px;
	color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#cbcbcb));
	background-image: -webkit-linear-gradient(top, #fefefe, #cbcbcb);
	background-image:    -moz-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:     -ms-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:      -o-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:         linear-gradient(to bottom, #fefefe, #cbcbcb);
	box-shadow: rgba(214,214,214,0.6) 0px 6px 0px;
	color: #444;
	text-shadow: rgba(255,255,255,0.5) 1px 1px 0px;
}

#content-wrapper {
	display: block;
	padding-top: 5em;
	color: #414141;
	line-height: 2em;
	text-shadow: #fff 1px 1px 0px;
	font-size: 15px;
}

	#home, #about, #blog, #tweet, #contact {
		display: block;
	}

.wrapper, #content-wrapper {
	margin: 0 auto;
	width: 960px;
	text-align: left;
}

	.navigation {
		font-size: 13px;
		text-transform: uppercase;
		display: inline-block;
		margin: 0;
		list-style-type: none;
		vertical-align: top;
	}
	
		.navigation li {
			display: inline-block;
			width: 70px;
			height: 16px;
			padding: 22px 0;
			text-align: center;
			cursor: pointer;
		}
			
		.navigation li:hover, .selected-nav {
			background-image: -webkit-gradient(linear, left top, left bottom, from(#7bbbf7), to(#338cdf));
			background-image: -webkit-linear-gradient(top, #7bbbf7, #338cdf);
			background-image:    -moz-linear-gradient(top, #7bbbf7, #338cdf); 
   		background-image:     -ms-linear-gradient(top, #7bbbf7, #338cdf); 
   		background-image:      -o-linear-gradient(top, #7bbbf7, #338cdf); 
   		background-image:         linear-gradient(to bottom, #7bbbf7, #338cdf);
			border-bottom: 6px solid #1f6db6;
		}
			
			.navigation li a {
				position: relative;
				z-index: 1px;
				color: #444;
				text-decoration: none;
			}
			
			.navigation li:hover a, .selected-nav a, .selected-nav2 a, .top a {
				color: #fff !important;
				text-shadow: #335f87 1px 1px 0px;
			}
	

Notice that the header-wrapper has position fixed, this aim to make the navigation always follow user scroll through the page.

Simple Style

.scroll() is a jQuery API to read user’s scroll on an element, in this context we will bind them to the window element. After reading the scroll we check its current position relative to the top of the page (scrollPosition) , checking through each navigation’s item and check the section which is closest to the scrollPosition. If the section found add customized style to make it look like selected.

//Bootstraping variable
headerWrapper	= parseInt($('#header-wrapper').height());
offsetTolerance	= 40;
	
//Detecting user's scroll
$(window).scroll(function() {
	
	//Check scroll position
	scrollPosition	= parseInt($(this).scrollTop());
	
	//Move trough each menu and check its position with scroll position then add selected-nav class
	$('.navigation a').each(function() {

		thisHref		= $(this).attr('href');
		thisTruePosition	= parseInt($(thisHref).offset().top);
		thisPosition 	= thisTruePosition - headerWrapper - offsetTolerance;
		
		if(scrollPosition >= thisPosition) {
		
		$('.selected-nav').removeClass('selected-nav');
		$('.navigation a[href='+ thisHref +']').parent('li').addClass('selected-nav');
		
		}
	});
});

If the last section is too close to the bottom of the page we can’t read the section using previous technique, to make it works we have to check we’re at the bottom of the page by subtract document height with window height then compare with scrollPosition, if it equal or scrollPosition more than bottomPage then we’re at the bottom of the page

//If we're at the bottom of the page, move pointer to the last section
bottomPage	= parseInt($(document).height()) - parseInt($(window).height());
	
if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {
	
	$('.selected-nav').removeClass('selected-nav');
	$('.navigation a:last').parent('li').addClass('selected-nav');
}

Check out the demo 1 for this code.

Sliding Style

Another slick way to tell the user is by sliding a pointer through the navigation. From previous code we need to add an image element acting as pointer. This pointer will be move to the left or to the right pointing current section.

	//Bootstraping variable
	headerWrapper		= parseInt($('#header-wrapper').height());
	offsetTolerance	= 40;
	pointer				= $('.pointer');
	firstNav				= $('.navigation a:first').parent('li');
	defaultPointer		= firstNav.offset().left;
	
	//Move pointer to the first menu
	pointer.css('left', defaultPointer);
	firstNav.addClass('selected-nav2');
	
	//Detecting user's scroll
	$(window).scroll(function() {
	
		//Check scroll position
		scrollPosition	= parseInt($(this).scrollTop());
		
		//Move trough each menu and check its position with scroll position then move the pointer
		$('.navigation a').each(function() {

			thisHref				= $(this).attr('href');
			thisTruePosition	= parseInt($(thisHref).offset().top);
			thisPosition 		= thisTruePosition - headerWrapper - offsetTolerance;
			thisNav				= $('.navigation a[href='+ thisHref +']').parent('li');
			currentPosition	= parseInt(thisNav.offset().left);
			
			if(scrollPosition >= thisPosition) {
			
				$('.selected-nav2').removeClass('selected-nav2');
				pointer.stop().animate({'left': currentPosition});
				thisNav.addClass('selected-nav2');
			}
			
		});
		
		//If we're at the bottom of the page, move pointer to the last section
		bottomPage			= parseInt($(document).height()) - parseInt($(window).height());
		lastNav				= $('.navigation a:last').parent('li');
		currentPosition	= lastNav.offset().left;
		
		if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {
			
			$('.selected-nav2').removeClass('selected-nav2');
			pointer.stop().animate({'left': currentPosition});
			lastNav.addClass('selected-nav2');
		}
		
	});

The difference with previous code is we are playing on the pointer rather than only styling the navigation. We check through each navigation’s item and get selected item’s left position relative to the window (currentPosition), finally slide the pointer to the currentPosition by adjusting its left. Check out the demo 2 for this code.

Cube Style

If you read my previous post you have to be familiar with this style. On this style focusing the navigation is using cube rotation, up to down direction. Just like previous post, we have to modify each navigation’s item by adding front side and top side. Front side is the default style and top side is selected style.

	

		

		 Home 
		 Home 
		
	

		.cube {
			-webkit-perspective : 1200px;
			-moz-perspective : 1200px;
			-ms-perspective : 1200px;
			perspective : 1200px;
			padding: 0 !important;
		}
		
		.cube:hover a {
			background: 0;
			color: 0;
			text-shadow: 0;
		}
		
			.cube-wrapper-show {
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-animation: showMenu 0.5s ease-in-out;
				-moz-animation: showMenu 0.5s ease-in-out;
				-ms-animation: showMenu 0.5s ease-in-out;
				height: 60px;		
			}
			
			.cube-wrapper-hide {
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-animation: hideMenu 0.5s ease-in-out;
				-moz-animation: hideMenu 0.5s ease-in-out;
				-ms-animation: hideMenu 0.5s ease-in-out;
				height: 60px;		
			}
			
				.top, .front {
					display: block;
					width: 70px;
					height: 16px;
					padding: 22px 0;
					vertical-align: middle;
					position: absolute;
				}
			
				.front {
					background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#cbcbcb));
					background-image: -webkit-linear-gradient(top, #fefefe, #cbcbcb);
					background-image:    -moz-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:     -ms-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:      -o-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:         linear-gradient(to bottom, #fefefe, #cbcbcb);
				}
				
				.front-before-rotate {
					box-shadow: rgba(214,214,214,0.6) 0px 6px 0px;
					-webkit-transform:  translateZ(25px);
					-moz-transform:  translateZ(25px);
					-ms-transform:  translateZ(25px);
					transform:  translateZ(25px);
				}
			
				.top {
					background-image: -webkit-gradient(linear, left top, left bottom, from(#7bbbf7), to(#338cdf));
					background-image: -webkit-linear-gradient(top, #7bbbf7, #338cdf);
					background-image:    -moz-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:     -ms-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:      -o-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:         linear-gradient(to bottom, #7bbbf7, #338cdf);
					border-bottom: 6px solid #1f6db6;	
					-webkit-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					-moz-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					-ms-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
				}
				
				.hide-front {
					display: none;
				}

				.show-front {
					display: block;
				}

				.show-top {
					display: block;
				}
				
				.showed-top {
					display: block;
					-webkit-transform: rotate3d(1,0,0,0deg);
					-moz-transform: rotate3d(1,0,0,0deg);
					-ms-transform: rotate3d(1,0,0,0deg);
					transform: rotate3d(1,0,0,0deg);
				}

				.hidden-top {
					-webkit-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					-moz-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					-ms-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
				}

@-webkit-keyframes showMenu {
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

		
@-webkit-keyframes hideMenu {
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

@-moz-keyframes showMenu {
	0% { -moz-transform: rotate3d(1,0,0,0); }
	100% { -moz-transform: rotate3d(1,0,0,-90deg); }
}

		
@-moz-keyframes hideMenu {
	0% { -moz-transform: rotate3d(1,0,0,-90deg); }
	100% { -moz-transform: rotate3d(1,0,0,0); }
}

@-ms-keyframes showMenu {
	0% { -ms-transform: rotate3d(1,0,0,0); }
	100% { -ms-transform: rotate3d(1,0,0,-90deg); }
}

		
@-ms-keyframes hideMenu {
	0% { -ms-transform: rotate3d(1,0,0,-90deg); }
	100% { -ms-transform: rotate3d(1,0,0,0); }
}

After checking through each navigation’s item, we add cube-wrapper-show class that trigger the CSS animation to rotate the cube-wrapper and hide other items by adding cube-wrapper-hide. When the animation done we push the displayed side to be displayed (see the reason).

	//Bootstrapping variable
	headerWrapper		= parseInt($('#header-wrapper').height());
	offsetTolerance	= 40;
	allNavigation		= $('.section');
	arrayNavigation	= new Array;
	bottomPage			= parseInt($(document).height()) - parseInt($(window).height());

	//Get all menu based on section
	allNavigation.each(function() {
		
		thisNav					= $(this).attr('id');
		thisHref					= $('a[href=#'+thisNav+']').attr('href');
		thisTruePosition		= parseInt($(thisHref).offset().top);
		thisPosition		 	= thisTruePosition - headerWrapper - offsetTolerance;
		
		arrayNavigation.push(thisPosition);
		
	});
	
	//Detecting user's scroll
	$(window).scroll(function() {
		
		//Check scroll position and get displayed section
		scrollPosition	= parseInt($(this).scrollTop());
		thisPosition	= 0;
		
		for(var i=0; i < arrayNavigation.length; i++){
		
			if(scrollPosition >= arrayNavigation[i]) {
				thisPosition =  i;
			}
		}
		
		//If we're at the bottom of the page, select last section
		if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {
			thisPosition = parseInt(arrayNavigation.length) - 1;
		}
		
		//Preparing menu to be displayed
		currentElem			= $('.cube:eq('+thisPosition+')');
		currentCube			= currentElem.children('.cube-wrapper');
		currentFront		= currentCube.children('.front');
		currentTop			= currentCube.children('.top');
		
		//Get last displayed menu
		showedElem			= $('.cube:lt('+thisPosition+'), .cube:gt('+thisPosition+')');
		showedCube			= showedElem.children('.cube-wrapper');
		showedFront			= showedCube.children('.front');
				
		if(!currentCube.hasClass('cube-wrapper-show')) {
			
			//Hide other displayed menu
			showedCube.each(function() {
				
				if($(this).hasClass('cube-wrapper-show')) {
						
					$(this).children('.front').removeClass('hide-front');
					$(this).removeClass('cube-wrapper-show').addClass('cube-wrapper-hide');
					$(this).children('.top').removeClass().addClass('top');
				}
			
			});	
			
			//Show selected menu
			currentFront.addClass('front-before-rotate');
			currentCube.addClass('cube-wrapper-show');
			
			//Clean up after animation end
			if($.browser.webkit) {
			
				currentCube.bind('webkitAnimationEnd', function() {
				
					//Clean up last displayed menu
					showedCube.removeClass().addClass('cube-wrapper');
					showedFront.removeClass('front-before-rotate');
				
					//Force menu to be displayed
					currentTop.addClass('showed-top');
					currentFront.addClass('hide-front');
						
					$(this).unbind();
					
				});

			} else {
				
				setTimeout(function(){
					
					showedCube.removeClass().addClass('cube-wrapper');
					showedFront.removeClass('front-before-rotate');
				
					//Force menu to be displayed
					currentTop.addClass('showed-top');
					currentFront.addClass('hide-front');
					
				}, 500);
			}				
		}
	});	

Check out the demo 3 for this code.

We’re Done

Ton of single page website with their unique menu spread out there, all of them can inspire us the navigation design and behavior, maybe you have one? Share yours or your thought!

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Simple Style

First to go we will create a simple animated search form that show only search button with search image on it. When the button receives a click, the input field will widen while the search image will move to left filling the left blank space before input text.

Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top. Here’s the HTML and CSS :

.wrapper-simple {
	text-align: center;
	margin: 0 auto;
	display: block;
	width: 60px;
	height: 45px;
	padding: 10px 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
					#9bb6c9 0 1px 2px;
	position: relative;
}

.wrapper-simple input[type=submit] {
	margin-top: .2em;
	z-index: 2;
	position: relative;
	vertical-align: top;
	height: 43px;
	min-width: 55px;
	border-radius: 3px;
	border: 1px solid #aa7818;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
	box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
	cursor: pointer;
}

	.wrapper-simple input[type=submit]:active {
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}
	
	.wrapper-simple input[type=submit]:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

.wrapper-simple input[type=text] {
	font-family: Arial;
	font-weight: bold;
	color: #1a3d51;
	background: #d8e6ef;
	border-radius:2px;
	padding: 10px 10px 15px 10px;
	width: 250px;
	border: 0;
	font-size: 16px;
	text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
	box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	position: absolute;
	width: 1px;
	z-index: 2;
	padding-left: 2em;
	margin-left: .2em;
}

.wrapper-simple img {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
}

Now we will read the click event on search button and animate the form using jQuery.

$('.wrapper-simple input[type=submit]').toggle(function(){
	
	$('.wrapper-simple').animate({'width':'300px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
	  .end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');
	
}, function() {
	
	$('.wrapper-simple').animate({'width':'60px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '0'})
	  .end().find(this).animate({'marginLeft':'0'}).attr('value', '');
	
});

The script toggling user’s click. First click will widen the div wrapper and input text, move the search button to the edge of input text and move image search to fill the left blank space before input text. Second click will revert to normal.

Cube Style

After making simple animated search form, actually we aren’t moving too far. So we will make another experiment, how about show the search form rotating like a cube? Well, CSS3 properties like transform, perspective and animation seems very helpful. The thing that we must give more attention that the following code and demo currently work only on Safari 5+ and Firefox 11.0 (Mac).

Making a cube is a bit tricky, for vertical rotate and one direction (up to down) we can create a cube by making 2 div, first div as a front side of the cube and the second div as a top side. The top side div must be rotated so it will be like coming from the top when the cube rotating.

The structure of elements will be :

wrapper1 acting as wrapper for all elements inside, content-wrapper1 also as a wrapper that will be rotated, search button-1 as top side and search-box1 as front side. The styling :

.wrapper1 {
	display: block;
	width: 300px;
	margin: 0 auto;
	-webkit-perspective : 1200px;
}

	.search-button1 span {
		display: block;
		margin: 0 auto;
		background: #643904;
		border-radius: 30px;
		width: 30px;
		height: 30px;
		box-shadow: rgba(255,255,255,.3) 0 1px 0px;
	}
	
		.search-button1 span img {
			vertical-align: middle;
			padding-top: 7px;
		}

	.search-button1:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

	.search-button1:active {
		margin-top: 0.2em;
		box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, 
						#8e620e 0 0.3em 0, 
						rgba(0, 0, 0, 0.2) 0 0.5em 3px;	
	}
	
.search-box1 {
	margin-top: -.6em;
	display: none;
	position: absolute;
	width: 300px;
	height: 50px;
	padding: 10px 6px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border: 1px solid #9bb6c9;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, 
					#899faf 0 .5em 0px, 
					rgba(0, 0, 0, 0.2) 0 .9em 3px;


	-webkit-transform:	rotate3d(1,0,0,90deg) 
								translateZ(20px);
}

	.search-box1 input {
		font-family: Arial;
		font-weight: bold;
		color: #1a3d51;
		background: #d8e6ef;
		border-radius:2px;
		padding: 10px 10px 15px 10px;
		width: 250px;
		border: 0;
		font-size: 16px;
		text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}
		
		.search-box1 input:focus {
			outline: none;
		}
	
	.search-box1 img {
		opacity: .5;
		position: absolute;
		margin: .6em 0 0 -2em;
		cursor: pointer;
		-webkit-transition: 0.5s linear;
	}
	
		.search-box1 img:hover {
			opacity: 1;
		}

.hide-search-button {
	display: none;
}

.show-search-button {
	display: block;
}

.show-search-box {
	display: block;
}

.showed-search-box {
	display: block;
	-webkit-transform: rotate3d(1,0,0,0deg);
}

.hidden-search-box {
	-webkit-transform:	rotate3d(1,0,0,90deg) 
								translateZ(25px);
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}
		
@-webkit-keyframes showBox{
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

		
@-webkit-keyframes hideBox{
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

We’re a half set up, now we will read the click event from the user and rotate the cube.

$('.search-button1').click(function() {
	
	$('.content-wrapper1').addClass('switch-show');
	$('.search-box1').addClass('show-search-box');
		
	setTimeout(function(){
			
		$('.content-wrapper1').removeClass('switch-show');
		$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
		$('.search-box1').addClass('showed-search-box');
		
	},480);
});

$('.search-box1 img').click(function() {
	
	$('.search-button1').removeClass('hide-search-button');
	$('.search-box1').addClass('hidden-search-box');
	$('.content-wrapper1').addClass('switch-hide');
	
		
	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-hide');
		$('.search-button1').removeClass('show-search-button');
		$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');
		
	},480);
		
});

The script above act as an animation delegator, all animation handled by CSS. Since the CSS animation we describe before only works once and revert to the normal state, we force the current showed side to visible and other side to hidden until the animation works before revert back, this is do the trick.

Cube Style With Animate

At some point we might animate the front side before rotate the cube. Then we reduce the front side’s width and widen it before rotate.

$('.search-button2').click(function() {
	
	$('.arrow').hide();
	
	$(this).stop().animate({'width':'300px'}, 500, function() {
		
		$('.content-wrapper2').addClass('switch-show');
		$('.search-box2').addClass('show-search-box');
		
		setTimeout(function(){

			$('.content-wrapper2').removeClass('switch-show');
			$('.search-button2').removeClass('show-search-button').addClass('hide-search-button');
			$('.search-box2').addClass('showed-search-box');
		
		},480);
		
	});
});

$('.search-box2 img').click(function() {
	
	
	$('.search-button2').removeClass('hide-search-button');
	$('.search-box2').addClass('hidden-search-box');
	$('.content-wrapper2').addClass('switch-hide');
	
	$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {
		
		$('.content-wrapper2').removeClass('switch-hide');
		$('.search-button2').removeClass('show-search-button');
		$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');
		
		$('.arrow').show();
		
	});
});

We use jQuery’s animate() function to widen the front side’s width and reduce it back when user close the form.

Conclusion

CSS3 and jQuery combination help us improve current web user interface into unlimited state, depend on our imagination. Did I missed something? I’d love to hear.

On the previous post we have talked about TransM.js as an image slider written in JavaScript. Now is the time for flash. CU3ER \kju:bər\ is an image slider based on flash which is made for creating 3D transition of slides you want to show.

The features provided including spin, slice, shade, add control function and describe content on every transition. You can try CU3ER here or download it here.