View demo Download source

Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor.

Let’s take a look at some screenshots:

The initial screen has the four flexible boxes. Resize the browser window to see them adapting fluidly.

When clicking on a box, it get’s expanded to fullscreen.

The view of a box that is expanded. A content are is revealed and we add a scroll to it when needed.

In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The page transition here is the new item sliding in from the bottom and the old view scaling down and disappearing in the back.

The navigation through the items has the same page transition. When we close the item view, it will transition back down and the works view will scale back up again.

We hope you like this little experiment and find it inspiring!

View demo Download source

View demo Download source

Today we will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up. When clicking on another screenshot, the device image gets updated and the grid disappears again.

The beautiful iPhone mockup used in the demo is by Jakub Kejha

Let’s get started with the markup.

The Markup

The HTML will consist of a main wrapper that contains a heading, a division for the device and a division for the grid:

<div id="ac-wrapper" class="ac-wrapper">
	<h2>Weatherous <span>Concept & UI Design</span></h2>
	<div class="ac-device">
		<a href="#"><img src="images/screen1.jpg"/></a>
		<h3 class="ac-title">Gentrify small batch umami retro vegan</h3>
	</div>
	<div class="ac-grid">
		<a href="#"><img src="images/screen1.jpg"/><span>Gentrify small batch umami retro vegan</span></a>
		<a href="#"><img src="images/screen2.jpg"/><span>Chambray squid semiotics</span></a>
		<a href="#"><img src="images/screen3.jpg"/><span>Fashion axe blue bottle</span></a>
		<a href="#"><img src="images/screen4.jpg"/><span>Photo booth single-origin coffee</span></a>
		<a href="#"><img src="images/screen5.jpg"/><span>Flexitarian synth keytar blog master</span></a>
		<a href="#"><img src="images/screen6.jpg"/><span>Next level retro flexitarian freegan</span></a>
		<a href="#"><img src="images/screen7.jpg"/><span>Pour-over superious meggings terry</span></a>
		<a href="#"><img src="images/screen8.jpg"/><span>Seitan william vinyl chillwave</span></a>
	</div>
</div>

Once we click on a grid item, we will update the content of the device container. We will also make the span for each grid item appear on hover.

Let’s style everything.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.
In this tutorial we will be going through the style of demo 1.

So let’s start with the main wrapper. This will be the container that will have perspective. The origin will not be in the center but a bit more up:

.ac-wrapper {
	width: 100%;
	position: relative;
	perspective: 1000px;
	perspective-origin: 50% 25%;
}

The heading will be positioned absolutely on the left side of the device:

.ac-wrapper h2 {
	top: 20%;
	width: 50%;
	position: absolute;
	font-weight: 300;
	font-size: 4em;
	text-align: right;
	padding: 0 180px 0 50px;
}

Let’s give a slightly different look to the span:

.ac-wrapper h2 span {
	display: block;
	font-size: 60%;
	color: #c0c0c0;
}

The device will have the iPhone mockup as a background image and we will set the right dimensions. This container will need to preserve the 3D transforms and we’ll add a transition to it. Later, we’ll define a “transition classes” that will contain the properties for the altered states.

.ac-device {
	background: url(../images/iPhone.png) no-repeat;
	width: 288px;
	height: 611px;
	margin: 0 auto;
	position: relative;
	transition: all 0.3s ease;
	transform-style: preserve-3d;
}

The screenshot will be inside of an anchor and we’ll set the dimensions here and position it to fit into the mockup:

.ac-device a {
	height: 440px;
	width: 249px;
	display: inline-block;
	margin: 85px 0 0 20px;
}

.ac-device a img {
	display: block;
}

The title for each screenshot once it’s in the mockup view will be positioned absolutely on the right side of the device:

.ac-device h3 {
	position: absolute;
	font-size: 2.5em;
	left: 100%;
	width: 100%;
	top: 60%;
	margin-left: 30px;
	font-weight: 300;
	color: #888;
}

Now, let’s style the grid. We want to display a total of eight items so a row will have four items. Let’s set a fitting width, make it absolute and center it by setting a negative left margin (half of its width) and a left value of 50%. The initial opacity is 0 and since the grid is displayed and covering the device, we’ll set the pointer events to none so that we can’t click on it when it’s invisible. We’ll also add a transition and translate it -350px on the Z axis:

.ac-grid {
	position: absolute;
	width: 620px;
	left: 50%;
	margin-left: -310px;
	height: 100%;
	z-index: 1000;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transform-style: preserve-3d;
	transition: all 0.3s ease;
	transform: translateZ(-350px);
}

The anchors in the grid will be floated left and the images inside will be set to 100% width. This will come in handy later on when we apply some media queries:

.ac-grid a {
	width: 145px;
	display: block;
	position: relative;
	float: left;
	margin: 10px 5px;
	cursor: pointer;
}

.ac-grid a img {
	display: block;
	width: 100%;
}

The span for the description will be positioned absolutely on top of the anchor and we’ll fade it in and move it a bit on hover:

.ac-grid a span {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	text-transform: uppercase;
	padding: 3em 1em 0;
	z-index: 100;
	color: #ddd;
	background: rgba(0,0,0,0.4);
	font-weight: 700;
	opacity: 0;
	transform: translateY(-5px);
	transition: all 0.2s ease;
}

.ac-grid a:hover span {
	opacity: 1;
	transform: translateY(0);
}

Next, we’ll define the “transition classes”. When we click on the device, we’ll apply a class to the wrapper which will trigger the fading in and scaling up of the grid and the moving back of the device:

.ac-wrapper.ac-gridview .ac-device {
	transform: translateZ(-350px);
	opacity: 0.6;
}

.ac-wrapper.ac-gridview .ac-grid {
	transform: translateZ(0px);
	opacity: 1;
	pointer-events: auto;
}

Once the grid is there, we also set the pointer-events to auto again.

Our layout has some absolutely positioned elements and we’ll need to take care of them on smaller screens. The idea is that we will switch the main heading to the right side first and then center everything once the screen is very small. The second media query takes care of the grid structure. Here we will set a fluid width for both, the grid and the anchors:

@media screen and (max-width: 63.875em) {
	.ac-wrapper { 
		font-size: 60%; 
		width: 100%; 
		padding: 0 20px;
	}

	.ac-device {
		margin: 0;
		width: 100%;
	}

	.ac-device h3 { 
		width: 50%;
		left: 290px;
	}

	.ac-wrapper h2 { 
		left: 308px; 
		padding: 0; 
		text-align: left; 
		margin-left: 30px;
	}
}

@media screen and (max-width: 39.8125em) {
	.ac-grid {
		width: 90%;
		left: 5%;
		margin-left: 0;
		padding-top: 150px;
	}

	.ac-grid a {
		width: 22%;
	}
}


@media screen and (max-width: 35.6875em) {
	.ac-wrapper {
		padding: 0 20px 100px;
	}

	.ac-wrapper h2 { 
		width: 100%;
		text-align: center;
		margin: 0 0 1em;
		top: 0;
		left: auto;
		position: relative;
	}

	.ac-device {
		margin: 0 auto;
		width: 288px;
	}

	.ac-device h3 {
		position: relative;
		margin: 0;
		left: auto;
		width: 100%;
		top: 100px;
		display: block;
		text-align: center;
	}
}

And that’s all the style! Let’s take a look at the JavaScript.

The JavaScript

Let’s start by caching some elements and initialize some variables:

	var $el = $( '#ac-wrapper' ),
		// device element
		$device = $el.find( '.ac-device' ),
		// the device image wrapper
		$trigger = $device.children( 'a:first' ),
		// the screens
		$screens = $el.find( '.ac-grid > a' ),
		// the device screen image
		$screenImg = $device.find( 'img' ),
		// the device screen title
		$screenTitle = $device.find( '.ac-title' ),
		// HTML Body element
		$body = $( 'body' ); 	

We will bind the events to the device’s image wrapper (anchor) and to the screen elements.

	function init() {
		// show grid
		$trigger.on( 'click', showGrid );
		// when a grid´s screen is clicked, show the respective image on the device
		$screens.on( 'click', function() {
			showScreen( $( this ) );
			return false;
		} );
	}

When the device’s image is clicked, the grid is shown. For this to happen the class “ac-gridview” has to be added to the ac-wrapper element:

	function showGrid() {
		$el.addClass( 'ac-gridview' );
		// clicking somewhere else on the page closes the grid view
		$body.off( 'click' ).on( 'click', function() { showScreen(); } );
		return false;
	}

When a screen element is clicked we remove the “ac-gridview” class from the ac-wrapper element, and update both, image source and title on the respective elements:

	function showScreen( $screen ) {
		$el.removeClass( 'ac-gridview' );
		if( $screen ) {
			// update image and title on the device
			$screenImg.attr( 'src', $screen.find( 'img' ).attr( 'src' ) );
			$screenTitle.text( $screen.find( 'span' ).text() );
		}
	}

For the third demo we also want to offer the possibility to navigate through the screenshots without having to open the grid. Depending to the direction we are navigating, the next screen will either scale up / fade in (navigating to the next screen) or move up / fade in (navigating to the previous screen). The same logic applies to the current screenshot. In order for this to work, we need to add the next/previous screen’s image to the DOM right before the current screen’s image (both images being absolute). When the transition ends we remove the old one:

	function navigate( direction ) {

		// if currently animating return
		if( animating ) {
			return false;
		}

		animating = true;
		
		// update current
		if( direction === 'next' ) {
			current = current < screensCount - 1 ? ++current : 0;
		}
		else if( direction === 'prev' ) {
			current = current > 0 ? --current : screensCount - 1;
		}
		
		// next screen to show
		var $nextScreen = $screens.eq( current );

		// if css transitions support:
		if( support ) {

			// append new image to the device and set the transition and initial style
			var $nextScreenImg = $( '' ).css( {
				transition : 'all 0.5s ease',
				opacity : 0,
				transform : direction === 'next' ? 'scale(0.9)' : 'translateY(100px)'
			} ).insertBefore( $screenImg );

			// update title
			$screenTitle.text( $nextScreen.find( 'span' ).text() );

			setTimeout( function() {

				// current image fades out / new image fades in
				$screenImg.css( {
					opacity : 0,
					transform : direction === 'next' ? 'translateY(100px)' : 'scale(0.9)' 
				} ).on( transEndEventName, function() { $( this ).remove(); } );

				$nextScreenImg.css( {
					opacity : 1,
					transform : direction === 'next' ? 'scale(1)' : 'translateY(0px)' 
				} ).on( transEndEventName, function() {
					$screenImg = $( this ).off( transEndEventName );
					animating = false;
				} );

			}, 25 );

		}
		else {
			// update image and title on the device
			$screenImg.attr( 'src', $nextScreen.find( 'img' ).attr( 'src' ) );
			$screenTitle.text( $nextScreen.find( 'span' ).text() );
			animating = false;
		}

	}

This navigation concept was introduced by Evan You and you can check it out here, or watch the video.

And that’s all! We hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.

The demo features some amazing artwork by Jaime Martinez.

So let’s start!

The Markup

Initially, we need a thumbnail grid for which we will use an unordered list. Each list item will contain an anchor which will have several data attributes:

<ul id="og-grid" class="og-grid">
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
			<img src="images/thumbs/1.jpg" alt="img01"/>
		</a>
	</li>
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
			<img src="images/thumbs/2.jpg" alt="img02"/>
		</a>
	</li>
	<li><!-- ... --></li>
	<!-- ... -->
</ul>

The href value will be used to construct the link in the preview description (this also comes in handy when JavaScript is disabled). The data-largesrc attribute contains the path to the larger image. data-title and data-description contain the title and description, respectively.

When we click on a thumbnail, we want a preview element to appear under the list item. For that we will need to insert an element into the grid. In fact, we will use the list item itself and add the preview element after the anchor:

<li>

	<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
		<img src="images/thumbs/2.jpg" alt="img02"/>
	</a>
	
	<div class="og-expander">
		<div class="og-expander-inner">
			<span class="og-close"></span>
			<div class="og-fullimg">
				<div class="og-loading"></div>
				<img src="images/2.jpg">
			</div>
			<div class="og-details">
				<h3>Veggies sunt bona vobis</h3>
				<p>Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.</p>
				<a href="http://cargocollective.com/jaimemartinez/">Visit website</a>
			</div>
		</div>
	</div>

</li>

Let’s style everything!

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

So, let’s start with the thumbnail grid. It will be full width and we’ll center the text. In this case this will mean that it will center the thumbnails because we’ll set them to display: inline-block:

.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	height: 250px;
}

The links and images will be displayed as block elements and we’ll remove some default styling:

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

When we click on an item, we will give a special class to the respective list item which will be called og-expanded. We’ll add a little arrow as pseudo-element to the anchor:

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

The preview itself will have the class og-expander and we’ll position that element absolutely. The initial height of the preview will be 0 and we’ll set the overflow to hidden:

.og-expander {
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
}

.og-expander-inner {
	padding: 50px 30px;
	height: 100%;
}

The inner division will have some paddings and a height of 100%.

The cross for closing the preview will be created using pseudo-elements, i.e. two rotated lines:

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	transform: rotate(45deg);
}

.og-close::after {
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

The wrappers for the image and for the details will be 50% wide and we’ll make them float next to each other:

.og-fullimg,
.og-details {
	width: 50%;
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
}

The details wrapper will have some padding and we’ll center the image inside of the image wrapper by setting the text-align to center and the image itself to display: inline-block. The image will also have a max-height and max-width of 100% so that it adjusts its size to the surrounding container:

.og-details {
	padding: 0 40px 0 20px;
}

.og-fullimg {
	text-align: center;
}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

Let’s style the text elements and the link:

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	padding: 40px 0 10px;
	margin-bottom: 10px;
}

.og-details p {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;
}

.og-details a {
	font-weight: 700;
	font-size: 16px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	border: 3px solid #333;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a:hover {
	border-color: #999;
	color: #999;
}

The loading element will be in the same container as the image and we’ll not use any images but this CSS-only technique. We’ll create a little circle and set three box shadows: one for making the circle itself look a bit smoother and two for “copying” the element. Then we create an animation that will change the background color and the box shadow colors sequentially:

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	animation: loader 0.5s infinite ease-in-out both;
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

Last, but not least, we’ll add two media queries for adjusting the text a bit and for hiding the full image once the screen gets so small that the preview image is not really useful anymore (we’ll also not load it in the JavaScript then).

@media screen and (max-width: 830px) {

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	
}

That’s all the style. Now, let’s take a look at the JavaScript.

The JavaScript

Let’s start by caching some elements and initializing some variables:

	// list of items
var $grid = $( '#og-grid' ),
	// the items
	$items = $grid.children( 'li' ),
	// current expanded item´s index
	current = -1,
	// position (top) of the expanded item
	// used to know if the preview will expand in a different row
	previewPos = -1,
	// extra amount of pixels to scroll the window
	scrollExtra = 0,
	// extra margin when expanded (between the preview element and the next item row)
	marginExpanded = 10,
	$window = $( window ), winsize,
	$body = $( 'html, body' ),
	// transitionend events
	transEndEventNames = {
		'WebkitTransition' : 'webkitTransitionEnd',
		'MozTransition' : 'transitionend',
		'OTransition' : 'oTransitionEnd',
		'msTransition' : 'MSTransitionEnd',
		'transition' : 'transitionend'
	},
	transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
	// support for csstransitions
	support = Modernizr.csstransitions,
	// default settings
	settings = {
		minHeight : 500,
		speed : 350,
		easing : 'ease'
	};

We will start by preloading all the images (thumbnails) in the grid. We then save the offset top and height for each item in the grid, get the current window’s size, and initialize some events:

	function init( config ) {
		
		// the settings..
		settings = $.extend( true, {}, settings, config );

		// preload all images
		$grid.imagesLoaded( function() {

			// save item´s size and offset
			saveItemInfo( true );
			// get window´s size
			getWinSize();
			// initialize some events
			initEvents();

		} );

	}

	// saves the item´s offset top and height (if saveheight is true)
	function saveItemInfo( saveheight ) {
		$items.each( function() {
			var $item = $( this );
			$item.data( 'offsetTop', $item.offset().top );
			if( saveheight ) {
				$item.data( 'height', $item.height() );
			}
		} );
	}

	function getWinSize() {
		winsize = { width : $window.width(), height : $window.height() };
	}

We will bind the click event for each item (anchor) and for the close button (when the item is opened). When we click on an item, the preview with the large image source and the details will be revealed or hidden if already shown. If we click the close button (cross) on the preview then this preview will be closed too.
We are also binding the resize event for the window, where some values are reset and the preview gets closed (if opened).

	function initEvents() {
		
		// when clicking an item, show the preview with the item´s info and large image;
		// close the item if already expanded.
		// also close if clicking on the item´s cross
		$items.on( 'click', 'span.og-close', function() {
			hidePreview();
			return false;
		} ).children( 'a' ).on( 'click', function(e) {

			var $item = $( this ).parent();
			// check if item already opened
			current === $item.index() ? hidePreview() : showPreview( $item );
			return false;

		} );

		// on window resize get the window´s size again
		// reset some values..
		$window.on( 'debouncedresize', function() {
			
			scrollExtra = 0;
			previewPos = -1;
			// save item´s offset
			saveItemInfo();
			getWinSize();
			var preview = $.data( this, 'preview' );
			if( typeof preview != 'undefined' ) {
				hidePreview();
			}

		} );

	}

With the showPreview function we will basically initialize the Preview object, which in turn will expand and reveal the details and the large version of the image. If a Preview instance is already initialized then we will only update the preview with the new details (if the clicked item is in the same row as the current expanded item) or hide it and initialize / open a new one (if not in the same row).
In order to check if the items are in the same row as the current preview, we use the offset top value of the items.

	function showPreview( $item ) {

		var preview = $.data( this, 'preview' ),
			// item´s offset top
			position = $item.data( 'offsetTop' );

		scrollExtra = 0;

		// if a preview exists and previewPos is different (different row) from item´s top, then close it
		if( typeof preview != 'undefined' ) {

			// not in the same row
			if( previewPos !== position ) {
				// if position > previewPos then we need to take the current preview´s height in consideration when scrolling the window
				if( position > previewPos ) {
					scrollExtra = preview.height;
				}
				hidePreview();
			}
			// same row
			else {
				preview.update( $item );
				return false;
			}
			
		}

		// update previewPos
		previewPos = position;
		// initialize new preview for the clicked item
		preview = $.data( this, 'preview', new Preview( $item ) );
		// expand preview overlay
		preview.open();

	}

The Preview object will have a reference to the currently displayed item (Preview.$item), and the index of the expanded item (Preview.expandedIdx). Note that the expanded item is not necessarily the displayed item. For instance if we click on a second item that is on the same row as the one clicked before then the Preview will be “reused” and the Preview.expandedIdx will not be the index of the Preview.$item. We need to keep the reference to the expanded item so that when the Preview is closed we know which item to “collapse”.

	// the preview obj / overlay
	function Preview( $item ) {
		this.$item = $item;
		this.expandedIdx = this.$item.index();
		this.create();
		this.update();
	}

As the Preview object is initialized we create the necessary structure where the item´s details will be rendered and we append it to the item:

	create : function() {
		// create Preview structure:
		this.$title = $( '<h3></h3>' );
		this.$description = $( '<p></p>' );
		this.$href = $( '<a href="#">Visit website</a>' );
		this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
		this.$loading = $( '<div class="og-loading"></div>' );
		this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
		this.$closePreview = $( '<span class="og-close"></span>' );
		this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
		this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
		// append preview element to the item
		this.$item.append( this.getEl() );
		// set the transitions for the preview and the item
		if( support ) {
			this.setTransition();
		}
	}

Then we fill the previous structure with the item´s details (stored in data attributes and the href).
The update function will also be used to just update the content of an existing preview.

	update : function( $item ) {

		// update with new item´s details 
		if( $item ) {
			this.$item = $item;
		}
		
		// if already expanded, remove class "og-expanded" from current item and add it to new item
		if( current !== -1 ) {
			var $currentItem = $items.eq( current );
			$currentItem.removeClass( 'og-expanded' );
			this.$item.addClass( 'og-expanded' );
			// position the preview correctly
			this.positionPreview();
		}

		// update current value
		current = this.$item.index();

		// update preview´s content
		var $itemEl = this.$item.children( 'a' ),
			eldata = {
				href : $itemEl.attr( 'href' ),
				largesrc : $itemEl.data( 'largesrc' ),
				title : $itemEl.data( 'title' ),
				description : $itemEl.data( 'description' )
			};

		this.$title.html( eldata.title );
		this.$description.html( eldata.description );
		this.$href.attr( 'href', eldata.href );

		var self = this;
		
		// remove the current image in the preview
		if( typeof self.$largeImg != 'undefined' ) {
			self.$largeImg.remove();
		}

		// preload large image and add it to the preview
		// for smaller screens we don´t display the large image (the last media query will hide the wrapper of the image)
		if( self.$fullimage.is( ':visible' ) ) {
			this.$loading.show();
			$( '<img/>' ).load( function() {
				self.$loading.hide();
				self.$largeImg = $( this ).fadeIn( 350 );
				self.$fullimage.append( self.$largeImg );
			} ).attr( 'src', eldata.largesrc );	
		}

	}

To reveal the preview we need to set the height of the Preview element and also of the item (to push down the items below). The height of the preview will be the window´s height minus the height of the grid item. To avoid cases where that height could be too small we add the option “minHeight” where we can specify the minimum height needed for the preview element.
As the preview opens we will want to scroll the window so that the preview is completely visible (and if possible, also the item).

	open : function() {

		setTimeout( $.proxy( function() {	
			// set the height for the preview and the item
			this.setHeights();
			// scroll to position the preview in the right place
			this.positionPreview();
		}, this ), 25 );

	}

	setHeights : function() {

		var self = this,
			onEndFn = function() {
				if( support ) {
					self.$item.off( transEndEventName );
				}
				self.$item.addClass( 'og-expanded' );
			};

		this.calcHeight();
		this.$previewEl.css( 'height', this.height );
		this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );

		if( !support ) {
			onEndFn.call();
		}

	}

	calcHeight : function() {

		var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
			itemHeight = winsize.height;

		if( heightPreview < settings.minHeight ) {
			heightPreview = settings.minHeight;
			itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
		}

		this.height = heightPreview;
		this.itemHeight = itemHeight;

	}

	positionPreview : function() {

		// scroll page
		// case 1 : preview height + item height fits in window´s height
		// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
		// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
		var position = this.$item.data( 'offsetTop' ),
			previewOffsetT = this.$previewEl.offset().top - scrollExtra,
			scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
		
		$body.animate( { scrollTop : scrollVal }, settings.speed );

	}

When closing the preview we reset the heights of the preview element and the expanded item. Once this is done, the preview element / structure gets removed from the DOM.

	close : function() {

		var self = this,
			onEndFn = function() {
				if( support ) {
					$( this ).off( transEndEventName );
				}
				self.$item.removeClass( 'og-expanded' );
				self.$previewEl.remove();
			};

		setTimeout( $.proxy( function() {

			if( typeof this.$largeImg !== 'undefined' ) {
				this.$largeImg.fadeOut( 'fast' );
			}
			this.$previewEl.css( 'height', 0 );
			// the current expanded item (might be different from this.$item)
			var $expandedItem = $items.eq( this.expandedIdx );
			$expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );

			if( !support ) {
				onEndFn.call();
			}

		}, this ), 25 );
		
		return false;

	}

And that's it! We hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

Today we want to share a simple and fun circular slideshow with you. It’s an experimental concept and the idea is to flip a circle in a specific angle depending on which spot of the circle we click. There are three different possibilities for each side: top, middle and bottom. For example, when clicking on the top right part of the image, the circle will flip in the associated angle, making it look as if we press down that part and reveal the next image that is on the back face of the circle.

The demo features illustrations by Isaac Montemayor. See his works on Dribbble or on his website.

This is how the structure looks like:

<div id="fc-slideshow" class="fc-slideshow">
	<ul class="fc-slides">
		<li><img src="images/1.jpg" /><h3>Hot</h3></li>
		<li><img src="images/2.jpg" /><h3>Cold</h3></li>
		<li><img src="images/3.jpg" /><h3>Light</h3></li>
		<li><img src="images/4.jpg" /><h3>Dark</h3></li>
		<li><img src="images/5.jpg" /><h3>Soft</h3></li>
		<li><img src="images/6.jpg" /><h3>Hard</h3></li>
		<li><img src="images/7.jpg" /><h3>Smooth</h3></li>
		<li><img src="images/8.jpg" /><h3>Rough</h3></li>
	</ul>
</div>

And we transform it into the following:

<div id="fc-slideshow" class="fc-slideshow">

	<ul class="fc-slides">
		<!-- ... -->
	</ul>

	<nav>
		<div class="fc-left">
			<span></span>
			<span></span>
			<span></span>
			<i class="icon-arrow-left"></i>
		</div>
		<div class="fc-right">
			<span></span>
			<span></span>
			<span></span>
			<i class="icon-arrow-right"></i>
		</div>
	</nav>

	<div class="fc-flip">
		<div class="fc-front">
			<div><img src="images/4.jpg"><h3>Dark</h3></div>
			<div class="fc-overlay-light"></div>
		</div>
		<div class="fc-back">
			<div><img src="images/5.jpg"><h3>Soft</h3></div>
			<div class="fc-overlay-dark"></div>
		</div>
	</div>
	
</div>

The nav element has some empty spans that serve as “detection areas”. Each side of the circle has three areas that will be clickable, one at the top, one in the middle and one at the bottom. The i element will serve as a navigation arrow and depending on which span we are hovering, we will rotate the little arrow box to the right place. But we won’t use the arrow as the clickable area but the whole span.

The division for the circle flip contains a special 3D structure: it has a front and a back side. Once we navigate to the next or previous item, we will show that structure and rotate the flip container so that we see the back side.

The overlays make everything look a bit more realistic by providing light or darkness. We animate the opacity depending on the angle of rotation.

We simply call the plugin like this:

$( '#fc-slideshow' ).flipshow();

And this are the options for the plugin:

// the options
$.Flipshow.defaults = {
	// default transition speed (ms)
	speed : 700,
	// default transition easing
	easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

Please note, that this is very experimental and will only work as intended in browsers that support CSS 3d transforms. For others there is a simple fallback that simply shows and hides the previous or next item.

We hope you find this little plugin inspiring!

View demo Download source

View demo Download source

Today we want to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Images are “hanged” along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and we’ll be turned to the next wall whith more images. To give a real sensation of being in a room, we only have four walls and corners. Each image will have a little description tag with a small-sized font and when clicking on it, a larger version will appear from below.

Please note that this is highly experimental and probably very buggy.

We recommend to view the demos in Google Chrome, they perform best there.

We use the following initial structure for adding figures and their captions:

<div id="gr-gallery" class="gr-gallery">

	<div class="gr-main">

		<figure>
			<div><img src="images/11.jpg" alt="img01" /></div>
			<figcaption>
				<h2><span>Penn. Station, Madison Square Garden and Empire State Building</span></h2>
				<div><p>New York City, 2009, by <a href="http://www.flickr.com/photos/thomasclaveirole">Thomas Claveirole</a></p></div>
			</figcaption>
		</figure>

		<figure>
			<!-- -->
		</figure>

		<!-- -->
	</div>
	
</div>

We will first transform it into the following structure that will contain a “room” with a main “wall”:

<div id="gr-gallery" class="gr-gallery">

	<div class="gr-main" style="display: none;">
		<!-- -->
	</div>

	<div class="gr-room">
		<div class="gr-wall-main">
			<div class="gr-floor" style="width: 3382px;"></div>
			<figure></figure>
			<figure></figure>
			<!-- -->
		</div>
	</div>

	<nav>
		<span class="gr-prev">prev</span>
		<span class="gr-next">next</span>
	</nav>

	<div class="gr-caption">
		<span class="gr-caption-close">x</span>
	</div>
	
</div><!-- /gr-gallery -->

The main wall will get a width so that a certain amount of images fits inside. The default number of images per wall are the total number divided by four since we have four walls to spread them on. We can also set the number of items per wall by initializing the layout array, as see in the demos:

Gallery.init( {
	layout : [3,2,3,2]
} );

Now, when we reach the end of a wall and rotate to see the next one, we’ll add another wall dynamically and set the right transforms so that it’s in the right angle towards the main wall.

Let’s take a look at some screenshots. The gallery starts by looking at the first image which will be centered in the viewport. With a very large screen, we will be able to see the neighboring images as well, depending on the wall size of course:

When clicking on the little description, a larger version will slide in from the bottom of the screen:

When clicking on a navigation arrow (we click to go to the right) we will move to the next or previous picture. When the end of the wall is reached, we’ll give a turn:

The next image is placed into another wall a positioned accordingly:

When we turn fully, the walls will be reset and we’ll again have only the main wall:

The biggest problem for these kind of extreme experiments is the different handling of 3D transforms in the browsers and of course the performance. When playing with extreme widths and perspective, there can be glitches in viewing because an element might be rotated “right into your face” :) The larger the element is in width, the higher the perspective value needs to be (at least for Firefox).

Sadly, the performance suffers when adding something like a box shadow, so we have stripped the demos down to their bare style and not added too much fanciness. It does look a bit ugly, but we simply wanted to show the 3D effect and the smoothness is more important for us in this experiment.

Anyway, we hope you enjoyed this little experiment and find it inspiring!

View demo Download source

View demo Download source

Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).

Note that this only works in browsers that support CSS 3D transforms. For other browsers, we simply show the book cover.

The demos are best viewed in WebKit browsers.

What we did was to build a structure that we can transform into a 3D object with CSS 3D transforms. Our book has six main sides and one inner page element that we’ll use to paginate through some content, simulating something like a “view inside” functionality. We could have used the BookBlock jQuery plugin for flipping through the pages but we didn’t want to overload it with too many effects.

A book is build up as follows:

<div class="bk-book">

	<div class="bk-front">
		<div class="bk-cover">
			<h2>
				<span>Anthony Burghiss</span>
				<span>A Catwork Orange</span>
			</h2>
		</div>
		<div class="bk-cover-back"></div>
	</div>

	<div class="bk-page">
		<div class="bk-content bk-content-current">
			<p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
		</div>
		<div class="bk-content">
			<!-- ... -->
		</div>
		<div class="bk-content">
			<!-- ... -->
		</div>
	</div>

	<div class="bk-back">
		<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>
	</div>

	<div class="bk-right"></div>

	<div class="bk-left">
		<h2>
			<span>Anthony Burghiss</span>
			<span>A Catwork Orange</span>
		</h2>
	</div>

	<div class="bk-top"></div>

	<div class="bk-bottom"></div>
</div>

The class names are based on the sides of a book when holding it and looking at the front, the cover. Since we want to open the book cover, we need to give the front a main cover side and a back side. The back of the book will also contain some content which will be visible when flipping the book.

When hovering over a book, we will rotate it slightly.

Specifically, we rotate the whole book 35 degrees on the Y-axis:

.bk-list li .bk-book.bk-bookdefault:hover {
	transform: rotate3d(0,1,0,35deg);
}

When opening the book by clicking on “View inside”, the front part will flip open and we can navigate through the preview pages by clicking on the arrows.

The rotations and flipping are done by applying certain classes:

/* Transform classes */

.bk-list li .bk-viewinside .bk-front {
	transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}

.bk-list li .bk-book.bk-viewinside {
	transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}

.bk-list li .bk-book.bk-viewback {
	transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}

In the second demo, we rotate the book so that we can only see the spine, the left side. On hover we simulate the familiar movement of taking a quick look of a book by slightly moving it towards us and rotating it. When clicking on it we will open it.

A second click on the book will close it again and put it back into the shelf.

Note that this is really just a concept and highly experimental. It’s probably very buggy and has much room for improvement. But anyway, we hope you enjoyed this experiment and find it inspiring!

View demo Download source

View demo Download source

For today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation. We wanted to translate this concept to a modern-looking alternative for a minimal online store design where the items represent different categories. Categories as use-case fit quite well because of the limited nature of this type of slider. For more items to be shown, this is certainly a far-from-optimal solution. If the amount of items is limited this might give an interesting little touch to the experience.

So, let’s get started with this last tutorial of 2012!

The Markup

For the HTML we will use a division that wraps some unordered lists that will contain the items and a navigation with the category links. Each list item will have a link that contains an image and a h4 heading.

<div id="mi-slider" class="mi-slider">
	<ul>
		<li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
		<li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
		<li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
		<li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
	</ul>
	<ul>
		<li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
		<li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>
		<li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
		<li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
	</ul>
	<ul>
		<li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
		<li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
		<li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
	</ul>
	<ul>
		<li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
		<li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
		<li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
		<li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
	</ul>
	<nav>
		<a href="#">Shoes</a>
		<a href="#">Accessories</a>
		<a href="#">Watches</a>
		<a href="#">Bags</a>
	</nav>
</div>

Let’s take a look at the style.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.
What we want to do is the following: initially we just want the first item list to show while all the other lis will be translated to the right, outside of the viewport. When we click on a navigation link the items will either slide in from the right or from the left, depending on which current position we are at and what the newly selected category is.

Let’s first style the wrapper, which is the division with the class mi-slider. It will have a predefined height which we need in order to set the position of the uls correctly:

.mi-slider {
	position: relative;
	margin-top: 30px;
	height: 490px;
}

The ul will be positioned absolutely which means that all the lists will be on top of each other. Remember, we only want to translate the list items, not the lists themselves. We set the pointer-events to none because we want to be able to click on the current list’s links:

.mi-slider ul {
	list-style-type: none;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 140px;
	overflow: hidden;
	text-align: center;
	pointer-events: none;
}

The pointer events of the current list should be reset, so that the containing links are clickable:

.mi-slider ul.mi-current {
	pointer-events: auto;
}

When JavaScript is disabled, we don’t want anything to look broken (we use Modernizr):

.no-js .mi-slider ul {
	position: relative;
	left: auto;
	bottom: auto;
	margin: 0;
	overflow: visible;
}

In order to center all the list items, we have given the ul a text-align of center and now we’ll give the list items an inline-block display with a width of 20%. This width makes sure that our items fit into the list and keeps it fluid.
By default, all the list items will be translated to the right. We use 600% here because it’s a large enought value to move them out of the viewport. We’ll also add a little transition for the opacity:

.mi-slider ul li {
	display: inline-block;
	padding: 20px;
	width: 20%;
	max-width: 300px;
	transform: translateX(600%);
	transition: opacity 0.2s linear;
}

Whithout JS we don’t want them to translate:

.no-js .mi-slider ul li {
	transform: translateX(0);
}

Let’s style the content of the list items. Note how we set the max-width of the images to 100%. This will ensure that the layout does not break but the images will resize according to their wrapper which is our li with a percentage-based width:

.mi-slider ul li a,
.mi-slider ul li img {
	display: block;
	margin: 0 auto;
}

.mi-slider ul li a {
	outline: none;
	cursor: pointer;
}

.mi-slider ul li img {
	max-width: 100%;
	border: none;
}

.mi-slider ul li h4 {
	display: inline-block;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	padding: 20px 10px 0;
}

On hover, we’ll animate the opacity of the list item:

.mi-slider ul li:hover {
	opacity: 0.7;
} 

The navigation needs to have a top value because the lists are positioned absolutely. We’ll center the navigation by giving lateral auto margins and we’ll set a maximum width of 800px:

.mi-slider nav {
	position: relative;
	top: 400px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	border-top: 5px solid #333;
}

We don’t want to show the navigation at all when there is no JavaScript enabled:

.no-js nav {
	display: none;
}

The navigation links will have a generous padding and we’ll give them a transition for hover:

.mi-slider nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 40px 30px 30px 34px;
	position: relative;
	color: #888;
	outline: none;
	transition: color 0.2s linear;
}

.mi-slider nav a:hover,
.mi-slider nav a.mi-selected {
	color: #000;
}

The mi-selected class, just like the mi-current class for the lists, we’ll set using JavaScript.

Now, let’s add that little arrow on the top. We’ll use the pseudo-classes :before and :after to create two triangles with borders:

.mi-slider nav a.mi-selected:after,
.mi-slider nav a.mi-selected:before {
	content: '';
	position: absolute;
	top: -5px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mi-slider nav a.mi-selected:after {
	border-color: transparent;
	border-top-color: #fff;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}

.mi-slider nav a.mi-selected:before {
	border-color: transparent;
	border-top-color: #333;
	border-width: 27px;
	left: 50%;
	margin-left: -27px;
}

Let get to the juicy bits, the animations. The first animation that we want to happen, is the scaling up of the items of the first list. The scaleUp animation will also include the items being translated to 0 because we want them to be in the viewport:

.mi-slider ul:first-child li,
.no-js .mi-slider ul li {
	animation: scaleUp 350ms ease-in-out both;
}

@keyframes scaleUp {
	0% { transform: translateX(0) scale(0); }
	100% { transform: translateX(0) scale(1); }
}

Let’s add a different delay to each list item so that they appear sequentially:

.mi-slider ul:first-child li:first-child {
	animation-delay: 90ms;
}

.mi-slider ul:first-child li:nth-child(2) {
	animation-delay: 180ms;
}

.mi-slider ul:first-child li:nth-child(3) {
	animation-delay: 270ms;
}

.mi-slider ul:first-child li:nth-child(4) {
	animation-delay: 360ms;
}

For our example we will just have a maximum of four items, so we’ll only define four delays. If we would have more items, we would include more delays.

For the sliding animations we will have four cases: two for the sliding in of new items and two for the sliding out of the current items, depending on the direction. So we’ll define four classes for the lists which we will add with JavaScript:

/* moveFromRight */

.mi-slider ul.mi-moveFromRight li {
	animation: moveFromRight 350ms ease-in-out both;
}

/* moveFromLeft */

.mi-slider ul.mi-moveFromLeft li {
	animation: moveFromLeft 350ms ease-in-out both;
}

/* moveToRight */

.mi-slider ul.mi-moveToRight li {
	animation: moveToRight 350ms ease-in-out both;
}

/* moveToLeft */

.mi-slider ul.mi-moveToLeft li {
	animation: moveToLeft 350ms ease-in-out both;
}

Now we need to set the according animation delays which will also depend on the direction. For example, the first item will slide in with no delay if it’s coming form the right side and also when it slides out to the left. The same will be true for the last item:

.mi-slider ul.mi-moveToLeft li:first-child,
.mi-slider ul.mi-moveFromRight li:first-child,
.mi-slider ul.mi-moveToRight li:nth-child(4),
.mi-slider ul.mi-moveFromLeft li:nth-child(4) {
	animation-delay: 0ms;
}

The increased delays will be set accordingly:

.mi-slider ul.mi-moveToLeft li:nth-child(2),
.mi-slider ul.mi-moveFromRight li:nth-child(2),
.mi-slider ul.mi-moveToRight li:nth-child(3),
.mi-slider ul.mi-moveFromLeft li:nth-child(3) {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(3),
.mi-slider ul.mi-moveFromRight li:nth-child(3),
.mi-slider ul.mi-moveToRight li:nth-child(2),
.mi-slider ul.mi-moveFromLeft li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(4),
.mi-slider ul.mi-moveFromRight li:nth-child(4),
.mi-slider ul.mi-moveToRight li:first-child,
.mi-slider ul.mi-moveFromLeft li:first-child  {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

And now let’s define the animations itself. For example, moving from the right will mean that we will set the translateX value to 600% and move to 0. Moving from the left, we’ll set the initial position to -600% so that the items are on the left side outside of the viewport. And so on:

@keyframes moveFromRight {
	0% { transform: translateX(600%); }
	100% { transform: translateX(0); }
}

@keyframes moveFromLeft {
	0% { transform: translateX(-600%); }
	100% { transform: translateX(0); }
}

@keyframes moveToRight {
	0% { transform: translateX(0%); }
	100% { transform: translateX(600%); }
}

@keyframes moveToLeft {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-600%); }
}

Last, but not least, let’s use some media queries to adjust the slider content for smaller screens.

We’ll start with adjusting the navigation so that it does not break when the screen is too small:

@media screen and (max-width: 910px){
	.mi-slider nav {
		max-width: 90%;
	}

	.mi-slider nav a {
		font-size: 12px;
		padding: 40px 10px 30px 14px;
	}
}

Since we set a fixed height to the slider, we want to make sure it adapts:

@media screen and (max-width: 740px){
	.mi-slider {
		height: 300px;
	}

	.mi-slider nav {
		top: 220px;
	}
}

For really small screens, we don’t simply want to make everything super tiny, but instead we want to make the navigation easy for touch devices. So we’ll simply show all the categories. We’ll set all the styles in a way that nothing is hidden and all the lists are displayed under each other:

@media screen and (max-width: 490px){ 
	.mi-slider {
		text-align: center;
		height: auto;
	}

	.mi-slider ul {
		position: relative;
		display: inline;
		bottom: auto;
		pointer-events: auto;
	}

	.mi-slider ul li {
		animation: none !important;
		transform: translateX(0) !important;
		padding: 10px 3px;
		min-width: 140px;
	}

	.mi-slider nav {
		display: none;
	}
}

And that’s all the style. Now let’s control some things with jQuery.

The JavaScript

Let’s create a simple jQuery plugin for our slider. Most of the work is done in the CSS where we have defined all the animations. The plugin will mainly focus on adding and removing classes and control the current category being shown. For browsers that don’t support animations we will fall back to a simple show/hide approach.

Let’s start by caching some elements and initialize some variables:

_init : function( options ) {

	// the categories (ul)
	this.$categories = this.$el.children( 'ul' );
	// the navigation
	this.$navcategories = this.$el.find( 'nav > a' );
	var animEndEventNames = {
		'WebkitAnimation' : 'webkitAnimationEnd',
		'OAnimation' : 'oAnimationEnd',
		'msAnimation' : 'MSAnimationEnd',
		'animation' : 'animationend'
	};
	// animation end event name
	this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
	// animations and transforms support
	this.support = Modernizr.csstransforms && Modernizr.cssanimations;
	// if currently animating
	this.isAnimating = false;
	// current category
	this.current = 0;
	var $currcat = this.$categories.eq( 0 );
	if( !this.support ) {
		this.$categories.hide();
		$currcat.show();
	}
	else {
		$currcat.addClass( 'mi-current' );
	}
	// current nav category
	this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
	// initialize the events
	this._initEvents();

}

We will bind the click event to the navigation category links under the slider. We assume that the index of each one corresponds to the index of the respective category (the ul). When a category link is clicked the items of the current category fly out, and the ones of the new category fly in one by one (remember, we defined the animation delays in the CSS).

_initEvents : function() {

	var self = this;
	this.$navcategories.on( 'click.catslider', function() {
		self.showCategory( $( this ).index() );
		return false;
	} );

	// reset on window resize..
	$( window ).on( 'resize', function() {
		self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
		self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0 ).addClass( 'mi-selected' );
		self.current = 0;
	} );

}

showCategory : function( catidx ) {

	if( catidx === this.current || this.isAnimating ) {
		return false;
	}
	this.isAnimating = true;
	// update selected navigation
	this.$navcategories.eq( this.current ).removeClass( 'mi-selected' ).end().eq( catidx ).addClass( 'mi-selected' );

	var dir = catidx > this.current ? 'right' : 'left',
		toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
		fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
		// current category
		$currcat = this.$categories.eq( this.current ),
		// new category
		$newcat = this.$categories.eq( catidx ),
		$newcatchild = $newcat.children(),
		lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
		self = this;

	if( this.support ) {

		$currcat.removeClass().addClass( toClass );
		
		setTimeout( function() {

			$newcat.removeClass().addClass( fromClass );
			$newcatchild.eq( lastEnter ).on( self.animEndEventName, function() {

				$( this ).off( self.animEndEventName );
				$newcat.addClass( 'mi-current' );
				self.current = catidx;
				var $this = $( this );
				// solve chrome bug
				self.forceRedraw( $this.get(0) );
				self.isAnimating = false;

			} );

		}, $newcatchild.length * 90 );

	}
	else {

		$currcat.hide();
		$newcat.show();
		this.current = catidx;
		this.isAnimating = false;

	}

}

And that’s it! I hope you enjoyed this tutorial and find it useful and inspiring!
We wish you a happy new year!

View demo Download source

View demo Download source

A pagination is an essential part of any content-rich website, such as a magazine or a blog. The classic pagination will consist of linked numbers and some maybe some arrows, a presentation that has its limits. If you have a lot of pages to show, your pagination will either grow out of proportion breaking the design, or, if you don’t want to show all pages, you’ll need to add some kind of access point for the pages in between, requiring an additional user action.

Thinking about a way to navigate pages in a more compact and novel way, we tried our luck with the jQuery UI slider. The idea of using a slider for this came from this brilliant Number Slider pen by simurai.

With a slider pagination we can reach any page quickly by just dragging the handle. Adding a set of arrows makes it easy to navigate to the previous or next page.

The main idea is to initially just show a little button with two arrows. The button shows the current page number and clicking on the arrows will navigate to the next or previous page:

Clicking on the button will make the slider appear; the button handle will be animated to the correct part of the slider. Now we can drag the slider to the desired page. Once we release the handle to drop it, the slider will go back to the initial state, with the updated page number:

Using a slider of this kind will not break a layout when there are many pages to display. It does require an additional click, though. But it might as well be a bit more fun to navigate :)

What do you think? Is is going into an interesting direction for navigating pages or do you prefer the classic way?
Make sure to explore the project and let us know what you think.

View demo Download source

View demo Download source

When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.

A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.

What we basically do is to imitate position: sticky but since it’s not yet supported in many browsers, we’ll do a bit of JavaScript to achieve the same result. We’ll be using jQuery.

The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.

As an example, let’s take a simple grid with figures and figcaptions:

<div class="grid clearfix" id="grid">

	<figure>
		<img src="images/4.jpg">
		<figcaption>
			<a href="http://drbl.in/fWMT">Fall 7 Times Stand Up 8</a> by Erika Mackley
		</figcaption>
	</figure>

	<figure><!-- ... --></figure>
	<figure><!-- ... --></figure>
	<figure><!-- ... --></figure>
	<!-- ... -->
	
</div>

In our demo we use jQuery Masonry for creating a neat grid.

Let’s take a look at the structural styling of the figcaption element (to see all the styles, take a look at the style.css). The caption should be absolute and we will set a left of auto. This is important because when we switch to fixed positioning, we want the caption to start at the left of its parent container. We set a bottom value of -60 pixels in order to hide the caption (minus its own height). Note that the parent container needs to have its overflow set to “hidden”.

We also add a little transition which will animate the bottom to 0 when we hover over the figure:

.grid figure figcaption {
	position: absolute;
	left: auto;
	width: 100%;
	height: 60px;
	bottom: -60px;
	transition: bottom 0.2s ease-in-out;
}

.grid figure:hover figcaption {
	bottom: 0px;
}

Now, we want to check if the thumbnail that is being hovered is cut off at the bottom, i.e. out of the window view. If yes, we will change the caption position to fixed and set a width to it (otherwise it would just happily expand until the end of the page).

Let’s start by creating a custom jQuery selector called :bottomInViewport that we will help us determine if the caption of the image should be rendered or not.

$.extend( $.expr[':'], {
	bottomInViewport : function( el ) {
		var scrollTop = ( document.documentElement.scrollTop || document.body.scrollTop ),
			elOffsetTop = $( el ).offset().top,
			elH = $( el ).height(),
			descrH = $( el ).find( 'figcaption' ).outerHeight(true),
			winH = ( window.innerHeight && window.innerHeight < $( window ).height() ) ? window.innerHeight : $( window ).height();

		return ( elOffsetTop + elH > scrollTop && elOffsetTop + elH < scrollTop + winH ) || ( scrollTop + winH - elOffsetTop < descrH );
	}
});

The function returns true if the element is completely inside the viewport, meaning that the bottom part is not cut off. It also returns true if the element is not in the viewport but the visible part is just too small to fit the caption. In these cases our script shouldn't do anything and the caption will simply show as usual. If the function returns false, we will show the caption by setting its position to fixed. Since we defined the bottom to be 0 in the CSS, it will show at the bottom of the page, right where we need it. We'll also have to set the width to its parent's width (the figure):

function changeToFixed( $description, itemWidth ) {
	$description.css({ position: 'fixed', width: itemWidth });
}

function resetStyle( $description, delay ) {
	setTimeout( function() { $description.css({ position: 'absolute', width: '100%'}); }, delay || 0 );
}

We will need to bind the mouseenter and mouseleave events to the items and also the scroll event to the window while hovering over an item:

$items.on( 'mouseenter mouseleave', function( event ) {

	var $item = $( this ), itemWidth = $item.width(),
		$description = $item.find( 'figcaption' );

	switch( event.type ) {
		case 'mouseenter' :

			if( !$item.is( ':bottomInViewport' ) ) {
				$item.data( 'sticky', true );
				changeToFixed( $description, itemWidth );
			}
			
			$( window ).on( 'scroll', function () {
				var inviewport = $item.is( ':bottomInViewport' );
				if( !inviewport && !$item.data( 'sticky' ) ) {
					$item.data( 'sticky', true );
					changeToFixed( $description, itemWidth );
				}
				else if( inviewport && $item.data( 'sticky' ) ) {
					$item.data( 'sticky', false );
					resetStyle( $description );
				}
			} );

			break;
		
		case 'mouseleave' :

			if( $item.data( 'sticky' ) ) {
				$item.data( 'sticky', false );
				resetStyle( $( this ).find( 'figcaption' ), 200 );
			}
			$( window ).off( 'scroll' );
			break;
	}

} );

When we hover over an item, we check if we should apply our trick or not. Also, we bind the scroll event to the window, where we will check if the trick should be applied or reset as we scroll. When we leave the item, we unbind the scroll event from the window and we reset the item's style (if the trick was previously applied to it).

And that's it! Take a look at the demo and hover over an item that is cut off at the bottom to see the effect. And then scroll. You will see how the caption sticks at the bottom until its "natural" position is reached.

I hope you enjoyed this little trick and find it useful!

Credits: the demo features Dribbble shots of illustrations by Erika Mackley.

View demo Download source

View demo Download source

We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content.

The idea is to navigate the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button. The sidebar menu will contain links to different pages, i.e. the table of contents. When clicking on a table of contents entry, we’ll jump to the respective page.

We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed.

The demo contains excerpts form the hilarious “The Funny Side of Physic” by A. D. Crabtre from Project Gutenberg.

The following libraries and jQuery plugins will be used:

1. BookBlock by Pedro Botelho
2. Custom jQuery++ by Bitovi
3. jScrollPane by Kevin Luck
4. jQuery Mouse Wheel Plugin by Brandon Aaron
5. Custom Modernizr (peek inside to see what this build includes)

So, let’s get started!

The Markup

Let’s have a main container for all our elements. Inside, we’ll add a division for the sidebar menu which we’ll give the class “menu-panel”, and the wrapper for the BookBlock with the class “bb-custom-wrapper”. The BookBlock will contain the wrapper (that we’ll apply the plugin to) and the structure that the plugin needs. Inside of each item, we’ll add a content wrapper with a division that we’ll need for the custom scroll functionality:

<div id="container" class="container">	

	<div class="menu-panel">
		<h3>Table of Contents</h3>
		<ul id="menu-toc" class="menu-toc">
			<li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
			<li><a href="#item2">Why we die</a></li>
			<li><a href="#item3">The honeymoon</a></li>
			<li><a href="#item4">A drawing joke</a></li>
			<li><a href="#item5">Commencing practice</a></li>
		</ul>
	</div>

	<div class="bb-custom-wrapper">

		<div id="bb-bookblock" class="bb-bookblock">

			<div class="bb-item" id="item1">
				<div class="content">
					<div class="scroller">
						<h2>Self-destruction</h2>
						<p>...</p>
					</div>
				</div><!-- /content -->
			</div><!-- /bb-item -->

			<div class="bb-item" id="item2"><!-- ... --></div>

			<div class="bb-item" id="item3"><!-- ... --></div>

			<div class="bb-item" id="item4"><!-- ... --></div>

			<div class="bb-item" id="item5"><!-- ... --></div>

		</div><!-- /bb-bookblock -->
		
		<nav>
			<a id="bb-nav-prev" href="#">←</a>
			<a id="bb-nav-next" href="#">→</a>
		</nav>

		<span id="tblcontents" class="menu-button">Table of Contents</span>

	</div><!-- /bb-custom-wrapper -->

</div><!-- /container -->

The menu items will point to the respective BookBlock pages (bb-item). We’ll also add navigation arrows and a button for toggling the opening and closing of the menu.

Let’s move on to the style.

The CSS

Note that we won’t use any vendor specific prefixes here, but you’ll find them in the files.

We don’t discuss the style of the BookBlock plugin here (you can find the styles in bookblock.css), instead we’ll focus on all the other styles that are important for the layout and customize a couple of things.

Let’s start by importing the Lato font from Google web fonts:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

The html element should have a height of 100% since we will need to set the heights of absolute elements inside to expand to the window’s height:

html { 
	height: 100%; 
}

Let’s use border-box for box-sizing which will allow us to define percentages for widths and heights of elements while using paddings, without worrying about oversizing elements:

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

(We are brutally resetting the paddings in margins of all elements; you don’t have to do that, instead you could just normalize the respective elements.)

Let’s define the font for the body and set it’s height to 100%. Remember, we need to set it because of the children that will be absolute and 100% in height as well:

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 400;
	font-size: 100%;
	color: #333;
	height: 100%;
}

We are using Modernizr and we’ve added the class “no-js” to the html element. When JavaScript is enabled, Modernizr will replace that class with “js”. This will allow us to give certain CSS properties to elements that we don’t want if JavaScript is disabled. Our 100% width and height layout only makes sense if we have JS enabled and only then we want the body to have its overflow hidden:

.js body {
	overflow: hidden;
}

Let’s define some link styles:

a {
	color: #555;
	text-decoration: none;
}

a:hover {
	color: #000;
}

We want our main container to occupy all the window width and height. The sidebar menu will be positioned outside of it by setting a negative left value (of its own width). The idea is to animate the whole container when we click to open the menu. It will slide to the right revealing the overflown sidebar menu.

So, let’s set the main wrappers’ widths and heights to 100% and add a transition to the container:

.container,
.bb-custom-wrapper,
.bb-bookblock {
	width: 100%;
	height: 100%;
}

.container {
	position: relative;
	left: 0px;
	transition: left 0.3s ease-in-out;
}

When we click on the menu button, we will add another class to the container which will set the left to 240 pixels (width of the sidebar menu):

.slideRight {
	left: 240px;
}

Without JavaScript enabled, we won’t be able to do this, so let’s add a left padding instead:

.no-js .container {
	padding-left: 240px;
}

By default, we want the sidebar menu to be fixed to the left side:

.menu-panel {
	background: #f1103a;
	width: 240px;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

When JS is enabled, we’ll set the position to absolute and the left to -240 pixel:

.js .menu-panel {
	position: absolute;
	left: -240px;
}

Let’s style the elements of the menu:

.menu-panel h3 {
	font-size: 1.8em;
	padding: 20px;
	font-weight: 300;
	color: #fff;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
} 

.menu-toc {
	list-style: none;
}

.menu-toc li a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	line-height: 3.5;
	padding: 0 20px;
	cursor: pointer;
	background: #f1103a;
	border-bottom: 1px solid #dd1338;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
	background: #dd1338;
}

The navigation will be positioned absolutely on top of everything:

.bb-custom-wrapper nav {
	top: 20px;
	left: 60px;
	position: absolute;
	z-index: 1000;
}

The arrow links and the menu button will also be positioned absolutely and we’ll make them round by setting the border-radius to 50%:

.bb-custom-wrapper nav span,
.menu-button {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
	background: #f1103a;
	border-radius: 50%;
	color: #fff;
	line-height: 30px;
	text-align: center;
	speak: none;
	font-weight: bold;
	cursor: pointer;
}

.bb-custom-wrapper nav span:last-child {
	left: 40px;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
	background: #000;
}

The menu button will be positioned in the top left corner and we’ll hide its text:

.menu-button {
	z-index: 1000;
	left: 20px;
	top: 20px;
	text-indent: -9000px;
}

Let’s create a little menu icon by using a pseudo-element with a double box shadow for the upper and lower line:

.menu-button:after {
	position: absolute;
	content: '';
	width: 50%;
	height: 2px;
	background: #fff;
	top: 50%;
	margin-top: -1px;
	left: 25%;
	box-shadow: 0 -4px #fff, 0 4px #fff;
}

In case that there is no JS enabled, we don’t need any of those elements, so we’ll simply hide them:

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
	display: none;
}

Let’s move to the inner parts of the BookBlock items. The content division needs to be absolute and we’ll set the overflow to hidden. This is important because we want to apply our custom scroll here and we’ll only do that when a page was turned. If we wouldn’t set the overflow to hidden, we’d see the content overflowing. Again, this only makes sense when we have JS enabled, so we’ll add the “js” class:

.js .content {
	position: absolute;
	top: 60px;
	left: 0;
	bottom: 50px;
	width: 100%;
	overflow: hidden;
}

The scroller div is the one that will grow with content, so let’s set some paddings here:

.scroller {
	padding: 10px 5% 10px 5%;
}

Using percentages as lateral padding will make the layout adjust liquidly to the screen size.

Let’s hide those sharp edges when we scroll by adding pseudo-elements with a white to transparent gradient to the top and the bottom of the content div:

.js .content:before,
.js .content:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	z-index: 100;
	pointer-events: none;
	background: 
		linear-gradient(
			to bottom, 
			rgba(255,255,255,1) 0%, 
			rgba(255,255,255,0) 100%
		);
}

.js .content:after {
	top: auto;
	bottom: 0;
	background: 
		linear-gradient(
			to top, 
			rgba(255,255,255,1) 0%, 
			rgba(255,255,255,0) 100%
		);
}

This will make the text appear slightly faded out.

Let’s style the text elements:

.content h2 {
	font-weight: 300;
	font-size: 4em;
	padding: 0 0 10px;
	color: #333;
	margin: 0 1% 40px;
	text-align: left;
	box-shadow: 0 10px 0 rgba(0,0,0,0.02);
	text-shadow: 0 0 2px #fff;
}

.no-js .content h2 {
	padding: 40px 1% 20px;
}

.content p {
	font-size: 1.2em;
	line-height: 1.6;
	font-weight: 300;
	padding: 5px 8%;
	text-align: justify;
}

Finally, let’s add some media queries. Without JavaScript enabled, we don’t want to show the menu anymore from 800 pixels on. This is just an example of how we can control these elements under certain conditions.

The last media query will resize the font a bit, for smaller devices. Using ems makes things easier for these cases.

@media screen and (max-width: 800px){
	.no-js .menu-panel {
		display: none;
	}

	.no-js .container {
		padding: 0;
	}
}

@media screen and (max-width: 400px){
	.menu-panel,
	.content {
		font-size: 75%;
	}
}

And that was all the style! Let’s add some funky dance moves, shall we?

The JavaScript

We will start by caching some elements and initializing the BookBlock plugin. We need to set some things after each page flip, mainly the current item’s index and the jScrollPane behavior. This is specified in the onEndFlip callback passed to the BookBlock.

var $container = $( '#container' ),

	// the element we will apply the BookBlock plugin to
	$bookBlock = $( '#bb-bookblock' ),

	// the BookBlock items (bb-item)
	$items = $bookBlock.children(),

	// index of the current item
	current = 0,

	// initialize the BookBlock
	bb = $( '#bb-bookblock' ).bookblock( {
		speed : 800,
		perspective : 2000,
		shadowSides	: 0.8,
		shadowFlip	: 0.4,
		// after each flip...
		onEndFlip : function(old, page, isLimit) {
			
			// update the current value
			current = page;

			// update the selected item of the table of contents (TOC)
			updateTOC();

			// show and/or hide the navigation arrows
			updateNavigation( isLimit );

			// initialize the jScrollPane on the content div for the new item
			setJSP( 'init' );

			// destroy jScrollPane on the content div for the old item
			setJSP( 'destroy', old );

		}
	} ),
	// the navigation arrows
	$navNext = $( '#bb-nav-next' ),
	$navPrev = $( '#bb-nav-prev' ).hide(),

	// the table of content items
	$menuItems = $container.find( 'ul.menu-toc > li' ),

	// button to open the TOC
	$tblcontents = $( '#tblcontents' ),

	transEndEventNames = {
		'WebkitTransition': 'webkitTransitionEnd',
		'MozTransition': 'transitionend',
		'OTransition': 'oTransitionEnd',
		'msTransition': 'MSTransitionEnd',
		'transition': 'transitionend'
	},

	// transition event name
	transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],

	// check if transitions are supported
	supportTransitions = Modernizr.csstransitions;

First, let’s bind the events to some of the elements initialized before. Also, we need to initialize the jScrollPane for the first (current) item.

function init() {

	// initialize jScrollPane on the content div of the first item
	setJSP( 'init' );
	initEvents();

}

Since we’ll eventually need to initialize, reinitialize and destroy the jScrollPane, let’s define a function for this:

function setJSP( action, idx ) {
		
	var idx = idx === undefined ? current : idx,
		$content = $items.eq( idx ).children( 'div.content' ),
		apiJSP = $content.data( 'jsp' );
	
	if( action === 'init' && apiJSP === undefined ) {
		$content.jScrollPane({verticalGutter : 0, hideFocus : true });
	}
	else if( action === 'reinit' && apiJSP !== undefined ) {
		apiJSP.reinitialise();
	}
	else if( action === 'destroy' && apiJSP !== undefined ) {
		apiJSP.destroy();
	}

}

We will need to bind several events:

1. We will call the BookBlock’s next() and prev() methods when we click the navigation arrows or when swiping the page
2. The TOC will be shown / hidden when we click the $tblcontents (menu) button
3. We will call the BookBlock jump() method when we click a TOC item
4. The jScrollPane will be initialized on window resize

So, here we go:

function initEvents() {

	// add navigation events
	$navNext.on( 'click', function() {
		bb.next();
		return false;
	} );

	$navPrev.on( 'click', function() {
		bb.prev();
		return false;
	} );
	
	// add swipe events
	$items.on( {
		'swipeleft'		: function( event ) {
			if( $container.data( 'opened' ) ) {
				return false;
			}
			bb.next();
			return false;
		},
		'swiperight'	: function( event ) {
			if( $container.data( 'opened' ) ) {
				return false;
			}
			bb.prev();
			return false;
		}
	} );

	// show TOC
	$tblcontents.on( 'click', toggleTOC );

	// click a menu item
	$menuItems.on( 'click', function() {

		var $el = $( this ),
			idx = $el.index(),
			jump = function() {
				bb.jump( idx + 1 );
			};
		
		current !== idx ? closeTOC( jump ) : closeTOC();

		return false;
		
	} );

	// reinit jScrollPane on window resize
	$( window ).on( 'debouncedresize', function() {
		// reinitialise jScrollPane on the content div
		setJSP( 'reinit' );
	} );

}

The navigation arrows’ visibility will depend on the current page. If we are on the first page we’ll only see the next arrow and if we are on the last page we’ll only see the previous arrow:

function updateNavigation( isLastPage ) {
	
	if( current === 0 ) {
		$navNext.show();
		$navPrev.hide();
	}
	else if( isLastPage ) {
		$navNext.hide();
		$navPrev.show();
	}
	else {
		$navNext.show();
		$navPrev.show();
	}

}

When we open the TOC we want to hide the navigation arrows and we just show them again after closing the TOC.
We will animate the sidebar menu with a CSS transition. If there’s no support for transitions then a simple show/hide fallback will be used:

function toggleTOC() {
	var opened = $container.data( 'opened' );
	opened ? closeTOC() : openTOC();
}

function openTOC() {
	$navNext.hide();
	$navPrev.hide();
	$container.addClass( 'slideRight' ).data( 'opened', true );
}

function closeTOC( callback ) {

	$navNext.show();
	$navPrev.show();
	$container.removeClass( 'slideRight' ).data( 'opened', false );
	if( callback ) {
		if( supportTransitions ) {
			$container.on( transEndEventName, function() {
				$( this ).off( transEndEventName );
				callback.call();
			} );
		}
		else {
			callback.call();
		}
	}

}

Phew! :) That’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source