In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

The beautiful photos are by Andrew and Lili and you can see their Behance profile here:
http://www.behance.net/AndrewLili
The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

Allrighty! Let’s start with the HTML!

The Markup

First, we will wrap all our slider elements in a wrapper with the class “rm_wrapper”:

<div class="rm_wrapper">
...
</div>

Inside of that wrapper we will have a container for the actual slider list, some mask and corner elements, the heading and a hidden div that will contain all the image sets:

<div id="rm_container" class="rm_container">
	<ul>
		<li data-images="rm_container_1" data-rotation="-15">
			<img src="images/1.jpg"/>
		</li>
		<li data-images="rm_container_2" data-rotation="-5">
			<img src="images/2.jpg"/>
		</li>
		<li data-images="rm_container_3" data-rotation="5">
			<img src="images/3.jpg"/>
		</li>
		<li data-images="rm_container_4" data-rotation="15">
			<img src="images/4.jpg"/>
		</li>
	</ul>
	<div id="rm_mask_left" class="rm_mask_left"></div>
	<div id="rm_mask_right" class="rm_mask_right"></div>
	<div id="rm_corner_left" class="rm_corner_left"></div>
	<div id="rm_corner_right" class="rm_corner_right"></div>
	<h2>Fashion Explosion 2012</h2>
	<div style="display:none;">
		<div id="rm_container_1">
			<img src="images/1.jpg"/>
			<img src="images/5.jpg"/>
			<img src="images/6.jpg"/>
			<img src="images/7.jpg"/>
		</div>
		<div id="rm_container_2">
			<img src="images/2.jpg"/>
			<img src="images/8.jpg"/>
			<img src="images/9.jpg"/>
			<img src="images/10.jpg"/>
		</div>
		<div id="rm_container_3">
			<img src="images/3.jpg"/>
			<img src="images/11.jpg"/>
			<img src="images/12.jpg"/>
			<img src="images/13.jpg"/>
		</div>
		<div id="rm_container_4">
			<img src="images/4.jpg"/>
			<img src="images/14.jpg"/>
			<img src="images/15.jpg"/>
			<img src="images/16.jpg"/>
		</div>
	</div>
</div>

So the unordered lists will have the first set of four images where each list element has some data attributes for the image sets and the rotation degree. We will use that data to know which images come next and how much each image should be rotated.

The mask and corner divs will be absolute elements that we will place on top of the slider, slightly rotated in order to cover some areas. Since we will use the same background color for these elements like the body’s background color, we will create the illusion of the images being shaped in a certain way.

Then we’ll add the elements for the navigation and the autoplay controls:

<div class="rm_nav">
	<a id="rm_next" href="#" class="rm_next"></a>
	<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
	<a id="rm_play" href="#" class="rm_play">Play</a>
	<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>

Let’s take a look at the CSS.

The CSS

First, we’ll reset some styles and define the properties for the body. (Remember, if we would have another background color, we would want to change the background and border colors of some of the elements in our slider, too.)

@import url('reset.css');
body{
	background:#f0f0f0;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:16px;
}
a{
	color:#000;
	text-decoration:none;
}
h1{
	padding:10px;
	margin:20px;
	font-size:40px;
	text-transform:uppercase;
	text-shadow:0px 0px 1px #fff;
	color:#333;
	background:transparent url(../images/line.png) repeat-x bottom left;
}

The main wrapper will have the following style:

.rm_wrapper{
	width:1160px;
	margin:0 auto;
	position:relative;
}

The container for the slider will have any overflow hidden, which will help shaping our slider since we will cut off the outer sides of it:

.rm_container{
	width:1050px;
	overflow:hidden;
	position:relative;
	height:530px;
	margin:0 auto;
}

The heading will have the following style:

.rm_container h2{
	background:transparent url(../images/lines.png) repeat top left;
	padding:10px 30px;
	position:absolute;
	bottom:170px;
	right:0px;
	color:#000;
	font-size:36px;
	text-transform:uppercase;
	text-shadow:1px 0px 1px #fff;
}

Let’s define the width for the ul to be bigger than the container since we want to make the list element float next to each other:

.rm_container ul{
	width:1170px;
}

By giving a negative left margin and a thick border to the list element, we will overlap the images and cut off the right sides so that we create our asymmetrical shapes by rotating the elements then. The border color will be the same like the background color of the body (or the container).

.rm_container ul li{
	float:left;
	margin-left:-80px;
	position:relative;
	overflow:hidden;
	width:310px;
	height:465px;
	border:30px solid #f0f0f0;
	border-width:50px 30px 0px 30px;
	background-color:#f0f0f0;
}

We’ll position the images absolutely:

.rm_container ul li img{
	position:absolute;
	top:0px;
	left:0px;
}

In the following we will style the mask and the corner elements. They will be all positioned absolutely and we’ll give them the grey background color. By rotating them, we’ll make the images to appear as being “shaped”:

.rm_mask_right, .rm_mask_left{
	position: absolute;
	height: 110px;
	background: #f0f0f0;
	width: 530px;
	bottom: -30px;
	left: 0px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.rm_mask_right{
	left:auto;
	right:0px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
	background: #f0f0f0;
	position:absolute;
	width:200px;
	height:100px;
	bottom:0px;
	left:-65px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rm_corner_right{
	left:auto;
	right:-65px;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

The navigation elements will be placed to the left and right of the main container:

.rm_nav a{
	position:absolute;
	top:200px;
	width:38px;
	height:87px;
	cursor:pointer;
	opacity:0.7;
}
.rm_nav a:hover{
	opacity:1.0;
}
.rm_nav a.rm_next{
	background:transparent url(../images/next.png) no-repeat top left;
	right:0px;
}
.rm_nav a.rm_prev{
	background:transparent url(../images/prev.png) no-repeat top left;
	left:0px;
}

The pause/play control will be placed to the top left of the main container:

.rm_controls{
	position:absolute;
	top:0px;
	left:-40px;
	height:20px;
}
.rm_controls a{
	cursor:pointer;
	opacity:0.7;
	padding-left:24px;
	font-size:16px;
	text-transform:uppercase;
	height:20px;
	float:left;
	line-height:20px;
}
.rm_controls a:hover{
	opacity:1.0;
}
.rm_controls a.rm_play{
	display:none;
	background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
	background:transparent url(../images/pause.png) no-repeat center left;
}

And that’s all the style! Let add the spice!

The JavaScript

The main idea for the slider functionality is to add another image before the current one with a slightly increased rotation degree than the current item. Then we will animate the rotation and make the new images appear.
So let’s start by caching some elements and checking if we are dealing with a special needs browser in order to deal with some issues:

//our 4 items
var $listItems 		= $('#rm_container > ul > li'),
	totalItems		= $listItems.length,

	//the controls
	$rm_next		= $('#rm_next'),
	$rm_prev		= $('#rm_prev'),
	$rm_play		= $('#rm_play'),
	$rm_pause		= $('#rm_pause'),

	//the masks and corners of the slider
	$rm_mask_left	= $('#rm_mask_left'),
	$rm_mask_right	= $('#rm_mask_right'),
	$rm_corner_left	= $('#rm_corner_left'),
	$rm_corner_right= $('#rm_corner_right'),

	//check if the browser is <= IE8
	ieLte8			= ($.browser.msie && parseInt($.browser.version) <= 8),

Then we will define our main function:

RotateImageMenu	= (function() {
...
})();

RotateImageMenu.init();

And then we define the following in our function:

	//difference of animation time between the items
var	timeDiff			= 300,
	//time between each image animation (slideshow)
	slideshowTime		= 3000,
	slideshowInterval,
	//checks if the images are rotating
	isRotating			= false,
	//how many images completed each slideshow iteration
	completed			= 0,
	/*
	all our images have 310 of width and 465 of height.
	this could / should be dynamically calculated
	if we would have different image sizes.

	we will set the rotation origin at
	x = width/2 and y = height*2
	*/
	origin				= ['155px', '930px'],
	init				= function() {
		configure();
		initEventsHandler();
	},
	//initialize some events
	initEventsHandler	= function() {
		/*
		next and previous arrows:
		we will stop the slideshow if active,
		and rotate each items images.
		1 	rotate right
		-1 	rotate left
		*/
		$rm_next.bind('click', function(e) {
			stopSlideshow();
			rotateImages(1);
			return false;
		});
		$rm_prev.bind('click', function(e) {
			stopSlideshow();
			rotateImages(-1);
			return false;
		});
		/*
		start and stop the slideshow
		*/
		$rm_play.bind('click', function(e) {
			startSlideshow();
			return false;
		});
		$rm_pause.bind('click', function(e) {
			stopSlideshow();
			return false;
		});
		/*
		adds events to the mouse and left / right keys
		*/
		$(document).bind('mousewheel', function(e, delta) {
			if(delta > 0) {
				stopSlideshow();
				rotateImages(0);
			}
			else {
				stopSlideshow();
				rotateImages(1);
			}
			return false;
		}).keydown(function(e){
			switch(e.which){
				case 37:
					stopSlideshow();
					rotateImages(0);
					break;
				case 39:
					stopSlideshow();
					rotateImages(1);
					break;
			}
		});
	},
	/*
	rotates each items images.
	we set a delay between each item animation
	*/
	rotateImages		= function(dir) {
		//if the animation is in progress return
		if(isRotating) return false;

		isRotating = true;

		$listItems.each(function(i) {
			var $item 				= $(this),
				/*
				the delay calculation.
				if rotation is to the right,
				then the first item to rotate is the first one,
				otherwise the last one
				*/
				interval			= (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;

			setTimeout(function() {
					//the images associated to this item
				var	$otherImages		= $('#' + $item.data('images')).children('img'),
					totalOtherImages	= $otherImages.length;

					//the current one
					$img				= $item.children('img:last'),
					//keep track of each items current image
					current				= $item.data('current');
					//out of bounds
					if(current > totalOtherImages - 1)
						current = 0;
					else if(current < 0)
						current = totalOtherImages - 1;

					//the next image to show and its
					//initial rotation (depends on dir)
					var otherRotation	= (dir === 1) ? '-30deg' : '30deg',
						$other			= $otherImages.eq(current).clone();

					//for IE <= 8 we will not rotate,
					//but fade out / fade in ...
					//better than nothing :)
					if(!ieLte8)
						$other.css({
							rotate	: otherRotation,
							origin	: origin
						});

					(dir === 1) ? ++current : --current;

					//prepend the next image to the <li>
					$item.data('current', current).prepend($other);

					//the final rotation for the current image
					var rotateTo		= (dir === 1) ? '80deg' : '-80deg';

					if(!ieLte8) {
						$img.animate({
							rotate	: rotateTo
						}, 1200, function(){
							$(this).remove();
							++completed;
							if(completed === 4) {
								completed = 0;
								isRotating = false;
							}
						});
						$other.animate({
							rotate	: '0deg'
						}, 600);
					}
					else {
						$img.fadeOut(1200, function(){
							$(this).remove();
							++completed;
							if(completed === 4) {
								completed = 0;
								isRotating = false;
							}
						});
					}

			}, interval );
		});

	},
	//set initial rotations
	configure			= function() {
		if($.browser.msie && !ieLte8)
			rotateMaskCorners();
		else if(ieLte8)
			hideMaskCorners();

		$listItems.each(function(i) {
			//the initial current is 1
			//since we already showing the first image
			var $item = $(this).data('current', 1);

			if(!ieLte8)
			$item.transform({rotate: $item.data('rotation') + 'deg'})
				 .find('img')
				 .transform({origin: origin});
		});
	},
	//rotates the masks and corners
	rotateMaskCorners	= function() {
		$rm_mask_left.transform({rotate: '-3deg'});
		$rm_mask_right.transform({rotate: '3deg'});
		$rm_corner_left.transform({rotate: '45deg'});
		$rm_corner_right.transform({rotate: '-45deg'});
	},
	//hides the masks and corners
	hideMaskCorners		= function() {
		$rm_mask_left.hide();
		$rm_mask_right.hide();
		$rm_corner_left.hide();
		$rm_corner_right.hide();
	},
	startSlideshow		= function() {
		clearInterval(slideshowInterval);
		rotateImages(1);
		slideshowInterval	= setInterval(function() {
			rotateImages(1);
		}, slideshowTime);
		//show the pause button and hide the play button
		$rm_play.hide();
		$rm_pause.show();
	},
	stopSlideshow		= function() {
		clearInterval(slideshowInterval);
		//show the play button and hide the pause button
		$rm_pause.hide();
		$rm_play.show();
	};

return {init : init};

As you noticed, we will treat older browsers a bit differently so that the slider works properly.

And that’s it! We really hope you enjoyed the tutorial and like the result!

View demo Download source

View demoDownload source

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Ok, so let’s get started, it’s less complicated than it looks.

The Markup

For this menu we will not create a list, but div elements for each menu item. We will pack the menu items in a main div called menu. Each item will have an icon as link element and a content div with the heading and a paragraph where we will add links or a search box:

<div class="menu">
	<div class="item">
		<a class="link icon_mail"></a>
		<div class="item_content">
			<h2>Contact us</h2>
			<p>
				<a href="#">eMail</a>
				<a href="#">Twitter</a>
				<a href="#">Facebook</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_help"></a>
		<div class="item_content">
			<h2>Help</h2>
			<p>
				<a href="#">FAQ</a>
				<a href="#">Live Support</a>
				<a href="#">Tickets</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_find"></a>
		<div class="item_content">
			<h2>Search</h2>
			<p>
				<input type="text"></input>
				<a href="">Go</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_photos"></a>
		<div class="item_content">
			<h2>Image Gallery</h2>
			<p>
				<a href="#">Categories</a>
				<a href="#">Archives</a>
				<a href="#">Featured</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_home"></a>
		<div class="item_content">
			<h2>Start from here</h2>
			<p>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pricing</a>
			</p>
		</div>
	</div>
</div>

Initially, the item div will be just as big to surround the icon, we will make it expand then and we will reveal the content afterward.

The CSS

The general style for the menu like the font will be defined as follows:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

The items inside of the menu will be floating right, since we want the items to expand to the left and push the other items away:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Then we define the style of the icons (the link class) in the following way:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

The other content elements we will style as follows:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

With a white text-shadow we can create a nice engraved text effect.
Ok, let’s add some magic.

The JavaScript

First, we need to add the script inclusions of jQuery and the other two scripts of Zachary.
Then we will add the following functions:

$('.item').hover(
	function(){
		var $this = $(this);
		expand($this);
	},
	function(){
		var $this = $(this);
		collapse($this);
	}
);
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.

The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

And that’s it! I hope you enjoyed it!

View demoDownload source

View demoDownload source

Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating billboard system.

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

Ok, let’s start coding!

1. The HTML

We will have quite a lot of markup for the image slices – it will be 22 slices for each ad:

<div class="container">
	<div class="ad">
		<div id="ad_1" class="ad_1">
			<img class="slice_1" src="ads/ad1_slice01.jpg"/>
			<img class="slice_2" src="ads/ad1_slice02.jpg"/>
			<img class="slice_3" src="ads/ad1_slice03.jpg"/>
			<img class="slice_4" src="ads/ad1_slice04.jpg"/>
			<img class="slice_5" src="ads/ad1_slice05.jpg"/>
			<img class="slice_6" src="ads/ad1_slice06.jpg"/>
			<img class="slice_7" src="ads/ad1_slice07.jpg"/>
			<img class="slice_8" src="ads/ad1_slice08.jpg"/>
			<img class="slice_9" src="ads/ad1_slice09.jpg"/>
			<img class="slice_10" src="ads/ad1_slice10.jpg"/>
			<img class="slice_11" src="ads/ad1_slice11.jpg"/>
			<img class="slice_12" src="ads/ad1_slice12.jpg"/>
			<img class="slice_13" src="ads/ad1_slice13.jpg"/>
			<img class="slice_14" src="ads/ad1_slice14.jpg"/>
			<img class="slice_15" src="ads/ad1_slice15.jpg"/>
			<img class="slice_16" src="ads/ad1_slice16.jpg"/>
			<img class="slice_17" src="ads/ad1_slice17.jpg"/>
			<img class="slice_18" src="ads/ad1_slice18.jpg"/>
			<img class="slice_19" src="ads/ad1_slice19.jpg"/>
			<img class="slice_20" src="ads/ad1_slice20.jpg"/>
			<img class="slice_21" src="ads/ad1_slice21.jpg"/>
			<img class="slice_22" src="ads/ad1_slice22.jpg"/>
		</div>
		<div id="ad_2" class="ad_2">
			<img class="slice_1" src="ads/ad2_slice01.jpg"/>
			<img class="slice_2" src="ads/ad2_slice02.jpg"/>
			<img class="slice_3" src="ads/ad2_slice03.jpg"/>
			<img class="slice_4" src="ads/ad2_slice04.jpg"/>
			<img class="slice_5" src="ads/ad2_slice05.jpg"/>
			<img class="slice_6" src="ads/ad2_slice06.jpg"/>
			<img class="slice_7" src="ads/ad2_slice07.jpg"/>
			<img class="slice_8" src="ads/ad2_slice08.jpg"/>
			<img class="slice_9" src="ads/ad2_slice09.jpg"/>
			<img class="slice_10" src="ads/ad2_slice10.jpg"/>
			<img class="slice_11" src="ads/ad2_slice11.jpg"/>
			<img class="slice_12" src="ads/ad2_slice12.jpg"/>
			<img class="slice_13" src="ads/ad2_slice13.jpg"/>
			<img class="slice_14" src="ads/ad2_slice14.jpg"/>
			<img class="slice_15" src="ads/ad2_slice15.jpg"/>
			<img class="slice_16" src="ads/ad2_slice16.jpg"/>
			<img class="slice_17" src="ads/ad2_slice17.jpg"/>
			<img class="slice_18" src="ads/ad2_slice18.jpg"/>
			<img class="slice_19" src="ads/ad2_slice19.jpg"/>
			<img class="slice_20" src="ads/ad2_slice20.jpg"/>
			<img class="slice_21" src="ads/ad2_slice21.jpg"/>
			<img class="slice_22" src="ads/ad2_slice22.jpg"/>
		</div>
	</div>
</div>

<div class="billboard"></div>

For these images, 22 slices (each slice 35 pixels wide) of a 770 pixel wide and 340 pixel high image were made. One might think that this is a lot of work and that we could actually take one whole picture and create divs acting like the slices with that background image and the right background position. But then we would not be able to create the same effect of a rotating slice (at least not with the JavaScript we created for this showcase).

The billboard will be an absolute positioned div with the billboard image. Since the image has some transparent spotlights, we want to lay it over the ad container.

2. The CSS

The style for the billboard frame will be the following:

.billboard{
    position:absolute;
    bottom:0px;
    left:50%;
    margin-left:-447px;
    width:916px;
    height:599px;
    background:transparent url(../images/billboard.png) no-repeat 0px 0px;
}

To position the element in the center of the page, we set the left value to 50% and the left margin negatively to half of the width of the element.

The container for the ads will have the same style like the billboard, except the background-image. We do that, because we need to position the containing elements at the same place like the billboard. We don’t want to place the ads inside of the billboard because we need the billboard to be on top of them. So, we do this trick and create another element with the same positioning:

.container{
    position:absolute;
    bottom:0px;
    left:50%;
    margin-left:-447px;
    width:916px;
    height:599px;
}
.ad{
    width:800px;
    height:336px;
    position:relative;
    margin:35px 0px 0px 60px;
    background-color:#333;
}
.ad_1 img{
    width:35px;
    height:336px;
    position:absolute;
}
.ad_2 img{
    width:0px;
    height:336px;
    margin-left:18px;
    position:absolute;
}

The slices of the ad images will be 35 pixels wide. The slices of the second ad will have the same width, but initially we need to set it to 0. We also need to set the left margin of the second slices to 18 pixels since we want to create the rotating effect. I will explain more about this value after we define the CSS for the slices.

The single slices need to be positioned:

.slice_1{left:0px;}
.slice_2{left:36px;}
.slice_3{left:72px;}
.slice_4{left:108px;}
.slice_5{left:144px;}
.slice_6{left:180px;}
.slice_7{left:216px;}
.slice_8{left:252px;}
.slice_9{left:288px;}
.slice_10{left:324px;}
.slice_11{left:360px;}
.slice_12{left:396px;}
.slice_13{left:432px;}
.slice_14{left:468px;}
.slice_15{left:504px;}
.slice_16{left:540px;}
.slice_17{left:576px;}
.slice_18{left:612px;}
.slice_19{left:648px;}
.slice_20{left:684px;}
.slice_21{left:720px;}
.slice_22{left:756px;}

By positioning the elements one more pixel to the left than they are actually wide, we create a little gap between the them. Now, the left margin has a value of 18 pixels because it is half of a slice plus its gap. We set this because we want the slices to appear (or disappear) from (or to) their center and not just from the side. If we simply set the width of a slice to 0 pixels the image will not seem to be rotating.

And that is all the CSS. For the additional fancy background images you can check out the downloadable version below.

Let’s create the rotating effect with jQuery.

3. The JavaScript

We will now create a function for rotating the slices. The function will make the first ad slices disappear by making their width 0 pixels. To achieve the rotating effect, we add a left margin of 18 pixels.

While the first ad slices disappear we make the others appear by removing the left margin of 18 pixels (that we initially set in the CSS) and giving them a width of 35 pixels. We call the rotate function like this:

 $('#ad_1 > img').each(function(i,e){
        rotate($(this),500,3000,i);
    });

The whole script that we call will look like this:

$(function() {
    $('#ad_1 > img').each(function(i,e){
        rotate($(this),500,3000,i);
    });
    function rotate(elem1,speed,timeout,i){
        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
            var other;
            if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
            else
                other = $('#ad_1').children('img').eq(i);
                other.animate({'marginLeft':'0px','width':'35px'},
                                  speed,function(){
                var f = function() { rotate(other,speed,timeout,i) };
                setTimeout(f,timeout);
            });
        });
    }
});

So, the rotate function performs the hiding of the current element (that it was called upon) and then identifies which element it’s currently dealing with, so that another call of the rotate function can be performed on the other ad slices.
The two times mentioned in the rotate function stand for the speed of the rotation effect (speed) and the duration between the swapping of the ads (timeout) in milliseconds.

And that’s it!
I hope you like and enjoy it!

View demoDownload source