View demo Download source

Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.

For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. The images are licensed under the Creative Commons Attribution-NonCommercial 2.0 Generic License. The placeholder text is by http://hipsteripsum.me/.

Please notice that this is very experimental and just a proof-of-concept. It was tested in the latest versions of Safari, Chrome and Safari Mobile. The behavior is unfortunately not as nice as expected in Firefox.

There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Let us know about your experience with it and how it performs.

Some of the jQuery plugins we are using for this:

• History.js for keeping track of the current state/pages
• TouchSwipe for dragging and swiping the pages
• Modernizr for checking browser support of the CSS properties

The HTML is build up of a main wrapper with the class container and the ID flip. Inside, we’ll have all the pages, the first one being the cover and the last one being the back of the booklet. The other pages will contain some title element and boxes. These boxes will each need an additional “height” and “width” class which will give the element percentage-based dimensions. For example, w-50 is a class that will give the element a width of 50%. Depending on how a page should be laid out, we would add a fitting set of items:

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

	<div class="f-page f-cover">
		<!-- ... -->
	</div>

	<div class="f-page">
		<div class="f-title">
			<!-- ... -->
		</div>
		<div class="box w-50 h-100">
			<div class="img-cont img-1"></div>
			<h3>Headline <span>Published May 7, 2012</span></h3>
			<p>Some text</p>
		</div>
		<div class="box w-50 h-100">
			<!-- ... -->
		</div>
	</div>

	<div class="f-page">
		<!-- ... -->
	</div>

	<!-- ... -->

	<div class="f-page f-cover-back">
		<!-- ... -->
	</div>

</div>

We are applying some “tricks” for making everything work responsively. The images are background-images and we set the background size of that element to “cover” while leaving the width and height fluid, in percentages. That’s of course not how it should be done. But it’s just for demonstration purpose. The teaser text is already loaded, and just “cut off” because the box is set to overflow “hidden”. To make it look smoother, we’ve just added a pseudo-element with a white to transparent gradient which covers the last bit of the box.

A great help for creating responsive layouts like these is this:

* { box-sizing: border-box }

which finally got the attention it deserves thanks to this article by Paul Irish. When laying out elements using percentages it really comes in handy to use the border-box value since we can for example, define paddings in pixels and not break our 50% width box.

We will use jQuery Templates for creating the book structure:

<script id="pageTmpl" type="text/x-jquery-tmpl">
	<div class="${theClass}" style="${theStyle}">
		<div class="front">
			<div class="outer">
				<div class="content" style="${theContentStyleFront}">
					<div class="inner">{{html theContentFront}}</div>
				</div>
			</div>
		</div>
		<div class="back">
			<div class="outer">
				<div class="content" style="${theContentStyleBack}">
					<div class="inner">{{html theContentBack}}</div>
				</div>
			</div>
		</div>
	</div>
</script>

The trick is to create a left side and a right side of a page, hiding half of each side to make it appear as one.

Before we call our experimental plugin, we need to check browser support first:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

	var $container 	= $( '#flip' ),
		$pages		= $container.children().hide();

	Modernizr.load({
		test: Modernizr.csstransforms3d && Modernizr.csstransitions,
		yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
		nope: 'css/fallback.css',
		callback : function( url, result, key ) {

			if( url === 'css/fallback.css' ) {
				$pages.show();
			}
			else if( url === 'js/jquery.flips.js' ) {
				$( '#flip' ).flips();
			}

		}
	});

</script>

If there is browser support for CSS 3D transforms and transitions we’ll load all the other necessary scripts and call our flips plugin.

Please note again that it’s only experimental, but nonetheless, I hope you find it interesting.

View demo Download source

View demo Download source

Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.

The photos used in this tutorial are from the Library of Congress Flickr set. The mp3 is a Kurt Vile song that was downloaded from the Free Music Archive, a wonderful resource for Creative Commons Licensed songs.

So let’s take a look at how it’s done!

The Markup

We will require a container div, the class in the example is ‘audio-slideshow’, however it can be whatever you’d like. This tag has two HTML5 data attributes:

1. data-audio: This is the path to the audio file
2. data-audio-duration: This is the length of the audio file in seconds. This is required so we can position the markers on the timeline without having to load the audio file into the browser

<div class="audio-slideshow" data-audio="audio.mp3" data-audio-duration="161">
	<div class="audio-slides">
		<img src="image.jpg" data-thumbnail="thumbnail.jpg" data-slide-time="0">
		<img src="image.jpg" data-thumbnail="thumbnail.jpg" data-slide-time="1">
	</div>
	<div class="audio-control-interface">
		<div class="play-pause-container">
			<a href="javascript:;" class="audio-play" tabindex="1">Play</a>
			<a href="javascript:;" class="audio-pause" tabindex="1">Pause</a>
		</div>
		<div class="time-container">
			<span class="play-time"></span> / <span class="total-time"></span>
		</div>

		<div class="timeline">
			<div class="timeline-controls"></div>
			<div class="playhead"></div>
		</div>

	 	<div class="jplayer"></div>
	</div>
</div>

Within the .audio-slideshow container is a div with a class of .audio-slides. The child tags within this div can be anything you want. In this particular example, they are images. However, they could be divs that contain text. They can be whatever tag you want, as long as they have two HTML5 data attributes:

1. data-thumbnail: This is the thumbnail that will show up when someone mouses over the marker
2. data-slide-time: This is the time, in seconds, when this slide should be displayed.

The other tags represent the other items within the player: The play and pause button, the playhead and timeline…etc. The plugin only needs to know their class or id names.

The CSS

/* Component style */

.audio-slideshow {
	width: 640px;
	height: 520px;
	position: relative;
	margin: 0 auto;
}

.audio-slideshow .audio-slides {
	position: relative;
}

.audio-slideshow .audio-slides img {
	display: block;
	position: absolute;
	top: 0; left: 0;
}

.audio-slideshow .audio-control-interface {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
}

.audio-slideshow .play-pause-container, .audio-slideshow .time-container {
	position: absolute;
	bottom: 25px;
	height: 18px;
	font-weight: bold;
	color: #777;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.audio-slideshow .play-pause-container a {
	outline: none;
	text-indent: -99999px;
	width: 16px;
	height: 16px;
	position: absolute;
}
.audio-slideshow .play-pause-container a.audio-play {
	background: transparent url(../images/play.png) no-repeat center center;
}

.audio-slideshow .play-pause-container a.audio-pause {
	background: transparent url(../images/pause.png) no-repeat center center;
}

.audio-slideshow .audio-control-interface .time-container {
	right: 3px;
}

.audio-slideshow .timeline {
	position: absolute;
	width: 100%;
	background-color: #fff;
	height: 20px;
	bottom: 0;
	left: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.audio-slideshow .timeline .playhead {
	position: absolute;
	height: 20px;
	background: #333;
	width: 0;
}

.marker {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset;
	position: absolute;
	background: #B8BAC6;
	top: 5px;
}

.marker span {
	padding: 5px;
	position: absolute;
	bottom: 20px;
	opacity: 0;
	left: -50px;
	z-index: -1;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	background: linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
	transition: all 0.3s ease-in-out;
}

.marker span img {
	display: block;
}

.marker:hover span {
	opacity: 1;
	z-index: 100;
}

As you can see from the CSS, pretty much everything can be customized. The timeline could be larger, smaller, above or even on top of the slides. The slides could be scaled to the size of the browser and the markers could be graphics instead of CSS circles.

The Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('>script src="/lib/js/jquery-1.7.1.min.js"><\/script>')</script>
<script src="jplayer/jquery.jplayer.js"></script>
<script src="js/jquery.audioslideshow.js"></script>
<script>
	$(document).ready(function() {
		$('.audio-slideshow').audioSlideshow();
	});
</script>

You will need three scripts to set this up:

1. jQuery (although I recommend utilizing Google’s CDN as shown above)
2. jPlayer
3. the AudioSlideshow plugin

Once those scripts are added to the page, you just need to call audioSlideshow on any tag that you want.

If you’ve changed any of the tag selectors, you can let the plugin know this by setting any of the following settings:

<script>
	$(document).ready(function() {
		$('.audio-slideshow').audioSlideshow(
			{
				jPlayerPath: "/lib/swf",
				suppliedFileType: "mp3",
				playSelector: ".audio-play",
				pauseSelector: ".audio-pause",
				currentTimeSelector: ".play-time",
				durationSelector: ".total-time",
				playheadSelector: ".playhead",
				timelineSelector: ".timeline"
			}
		);
	});
</script>

Audio Slideshow with jPlayer on Github.

View demo Download source

View demo Download source

In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

We’ll use an unordered list for the thumbnails and the description overlays:

<ul id="da-thumbs" class="da-thumbs">
	<li>
		<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
			<img src="images/7.jpg" />
			<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
		</a>
	</li>
	<li>
		<!-- ... -->
	</li>
	<!-- ... -->
</ul>

The list items will be floating left and have a relative positioning because we will make the description overlay absolute:

.da-thumbs li {
	float: left;
	margin: 5px;
	background: #fff;
	padding: 8px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
	display: block;
	position: relative;
}
.da-thumbs li a {
	overflow: hidden;
}
.da-thumbs li a div {
	position: absolute;
	background: rgba(75,75,75,0.7);
	width: 100%;
	height: 100%;
}

Now, we will define some classes that we’ll then add using JavaScript. What we need is an animation class, some classes for the initial positioning of the description overlay, and two classes for the final position. We could actually do all this in JavaScript, but I like to have the style separately so that it can be manipulated or adjusted easier:

.da-thumbs li a div.da-animate {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
	left: 0px;
	top: -100%;
}
.da-slideFromBottom {
	left: 0px;
	top: 100%;
}
.da-slideFromLeft {
	top: 0px;
	left: -100%;
}
.da-slideFromRight {
	top: 0px;
	left: 100%;
}
/* Final state classes: */
.da-slideTop {
	top: 0px;
}
.da-slideLeft {
	left: 0px;
}

What we will do is the following: depending on the place we are entering with the mouse, we’ll apply the respective “from” class which will set the correct initial position of the overlay. Then we will apply the animation class and then we add the final state class, so that the overlay slides in. When we leave the element, we will again apply the respective “from” class (although now we are actually sliding out) and remove the previous final state class.

So, the heart of our little plugin is the following part:

	this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {

		var $el			= $(this),
			evType		= event.type,
			$hoverElem	= $el.find( 'div' ),
			direction	= _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
			hoverClasses= _self._getClasses( direction );

		$hoverElem.removeClass();

		if( evType === 'mouseenter' ) {

			$hoverElem.hide().addClass( hoverClasses.from );

			clearTimeout( _self.tmhover );

			_self.tmhover	= setTimeout( function() {

				$hoverElem.show( 0, function() {
					$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
				} );

			}, _self.options.hoverDelay );

		}
		else {

			$hoverElem.addClass( 'da-animate' );

			clearTimeout( _self.tmhover );

			$hoverElem.addClass( hoverClasses.from );

		}

	} );

We basically bind the ‘mouseenter’ and ‘mouseleave’ event to the list item and with the function _getDir we’ll get the direction we are moving in or out (imagine the “detection” area for each direction as a rectangle divided into four triangles). All classes are removed initially and depending on if we are entering or leaving the item, we’ll either set all three classes or just the animation class and the “from” class.

You’ll see that in the second demo we’ve added a little delay so that we don’t have much animations going on when we move the mouse from an extreme corner to another one.

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

Needless to say, this will only work in browsers that support CSS transitions!

View demo Download source

View demo Download source

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

The icons used in the demo is by Artcore Illustration and they are licensed under the
Creative Commons BY-NC-ND 3.0 license.

So, let’s start!

The Markup

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:

<section id="jms-slideshow" class="jms-slideshow">

	<div class="step" data-color="color-1">
		<div class="jms-content">
			<h3>Some headline</h3>
			<p>Some text</p>
			<a class="jms-link" href="#">Read more</a>
		</div>
		<img src="images/1.png" />
	</div>

	<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
		<!-- ... -->
	</div>

	<!-- ... -->

</section>

Let’s take care of the style.

The CSS

Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values:

.jms-slideshow {
	position: relative;
	width: 80%;
	max-width: 1400px;
	min-width: 640px;
	margin: 20px auto;
	height: 460px;
}

The next wrapper is dynamically added, and this will be the visible slideshow wrapper:

.jms-wrapper {
	width: auto;
	min-width: 600px;
	height: 440px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid #fff;
	border: 10px solid rgba(255, 255, 255, 0.9);
	outline: none;
	transition: background-color 1s linear;
}

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

.color-1 {
	background-color: #E3D8FF;
	background-color: rgba(227, 216, 268, 1);
}
.color-2 {
	background-color: #EBBBBC;
	background-color: rgba(235, 187, 188, 1);
}
.color-3 {
	background-color: #EED9C0;
	background-color: rgba(238, 217, 192, 1);
}
.color-4 {
	background-color: #DFEBB1;
	background-color: rgba(223, 235, 177, 1);
}
.color-5{
	background-color: #C1E6E5;
	background-color: rgba(193, 230, 229, 1);
}

The steps will have the following style:

.step {
	width: 900px;
    height: 420px;
	display: block;
	transition: opacity 1s;
}
.step:not(.active) {
	opacity: 0;
}

Inactive steps will have 0 opacity. When the slides are moved, the opacity will be set to 1.

The inner parts of the slides will have the following style:

.jms-content{
	margin: 0px 370px 0px 20px;
	position: relative;
	clear: both;
}
.step h3{
	color: #fff;
	font-size: 52px;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	margin: 0;
	padding: 60px 0 10px 0;
}
.step p {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 34px;
	font-weight: normal;
	position: relative;
	margin: 0;
}

The “read more” link will have a little transition by itself: once a step becomes active, it will move up wile fading in:

a.jms-link{
	color: #fff;
	text-transform: uppercase;
	background: linear-gradient(top, #969696 0%,#727272 100%);
	padding: 8px 15px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border: 1px solid #444;
	border-radius: 4px;
	opacity: 1;
	margin-top: 40px;
	clear: both;
	transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
	opacity: 0;
	margin-top: 80px;
}

The image will be positioned absolutely on the right side of each slide:

.step img{
	position: absolute;
	right: 0px;
	top: 30px;
}

The navigation dots will positioned at the bottom:

.jms-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 20px;
	z-index: 2000;
	user-select: none;
}

With “user-select: none” the text of an element and its sub-elements will appear as if they can’t be selected.
The span will be a dark little dot:

.jms-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #777;
	margin: 3px;
	cursor: pointer;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset,
		1px 1px 1px rgba(255,255,255,0.3);
}

And we’ll style a pseudo-element to look like a little white dot:

.jms-dots span.jms-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

The arrow navigation spans will be positioned on the left and on the right side of the slideshow. We’ll use background images for the arrows:

.jms-arrows{
	user-select: none;
}
.jms-arrows span{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	height: 80px;
	width: 30px;
	cursor: pointer;
	z-index: 2000;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
	background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
	left: -10px;
}
.jms-arrows span.jms-arrows-next{
	background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
	right: -10px;
}

Now we have styled the slideshow. Let’s move on to the JavaScript!

The JavaScript

We will be using the jmpress.js plugin to create our slideshow. Although you can make use of a lot of its functionality, we will just use the necessary parts to build our script. You can read more about the possibilities and options that jmpress.js offers here.

We will create a jQuery plugin for the slideshow. We can call the plugin like this:

$( '#jms-slider' ).jmslideshow();

The options for the jmpress plugin are defined as default options in our plugin (note that you can specify more than the ones listed):

jmpressOpts	: {
	// set the viewport
	viewPort 		: {
		height	: 400,
		width	: 1300,
		maxScale: 1
	},
	fullscreen		: false,
	hash			: { use : false },
	mouse			: { clickSelects : false },
	keyboard		: { use : false },
	animation		: { transitionDuration : '1s' }
},

You can either change them inside the slideshow plugin, or pass a specific value when you initialize the plugin. As an example:

// specify the jmpress options
var jmpressOpts	= {
	animation		: { transitionDuration : '0.8s' }
};

// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
	autoplay	: true,
	bgColorSpeed: '0.8s',
	arrows		: false
}));

The following are the set of available options that are available for the slideshow plugin:

$.JMSlideshow.defaults 		= {
	// options for the jmpress plugin.
	// you can add more options...
	jmpressOpts	: {
		// set the viewport
		viewPort 		: {
			height	: 400,
			width	: 1300,
			maxScale: 1
		},
		fullscreen		: false,
		hash			: { use : false },
		mouse			: { clickSelects : false },
		keyboard		: { use : false },
		animation		: { transitionDuration : '1s' }
	},
	// for this specific plugin we will have the following options:
	// shows/hides navigation arrows
	arrows		: true,
	// shows/hides navigation dots/pages
	dots		: true,
	// each step's bgcolor transition speed
	bgColorSpeed: '1s',
	// slideshow on / off
	autoplay	: false,
	// time between transitions for the slideshow
	interval	: 3500
};

Once the slideshow plugin is called, the first function to be executed is the init function:

_init : function( options ) {

	this.options 		= $.extend( true, {}, $.JMSlideshow.defaults, options );

	// the slides
	this.$slides		= $('#jms-slider').children('div');
	// total number of slides
	this.slidesCount	= this.$slides.length;
	// step's bgcolor
	this.colors			= $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
	// build the necessary structure to run jmpress
	this._layout();
	// initialize the jmpress plugin
	this._initImpress();
	// if support (function implemented in jmpress plugin)
	if( this.support ) {

		// load some events
		this._loadEvents();
		// if autoplay is true start the slideshow
		if( this.options.autoplay ) {

			this._startSlideshow();

		}

	}

},

In the _layout function we are building the necessary structure for the jmpress plugin. Also, we will be adding the navigation arrows / dots in case these are set to true in the options.

_layout				: function() {

	// adds a specific class to each one of the steps
	this.$slides.each( function( i ) {

		$(this).addClass( 'jmstep' + ( i + 1 ) );

	} );

	// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
	this.$jmsWrapper	= this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();

	// transition speed for the wrapper bgcolor
	this.$jmsWrapper.css( {
		'-webkit-transition-duration' 	: this.options.bgColorSpeed,
		'-moz-transition-duration' 		: this.options.bgColorSpeed,
		'-ms-transition-duration' 		: this.options.bgColorSpeed,
		'-o-transition-duration' 		: this.options.bgColorSpeed,
		'transition-duration' 			: this.options.bgColorSpeed
	} );

	// add navigation arrows
	if( this.options.arrows ) {

		this.$arrows	= $( '<nav class="jms-arrows"/>' );

		if( this.slidesCount > 1 ) {

			this.$arrowPrev	= $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
			this.$arrowNext	= $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );

		}

		this.$el.append( this.$arrows )

	}

	// add navigation dots
	if( this.options.dots ) {

		this.$dots		= $( '<nav class="jms-dots"/>' );

		for( var i = this.slidesCount + 1; --i; ) {

			this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );

		}

		if( this.options.jmpressOpts.start ) {

			this.$start		= this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;

			( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;

			this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );

		}

		this.$el.append( this.$dots )

	}

},

We will initialize the jmpress plugin in the _initImpress function. We will also redefine the “setActive” method of jmpress in order to switch the active navigation dot.

_initImpress		: function() {

	var _self = this;

	this.$jmsWrapper.jmpress( this.options.jmpressOpts );
	// check if supported (function from jmpress.js):
	// it adds the class not-suported to the wrapper
	this.support	= !this.$jmsWrapper.hasClass( 'not-supported' );

	// if not supported remove unnecessary elements
	if( !this.support ) {

		if( this.$arrows ) {

			this.$arrows.remove();

		}

		if( this.$dots ) {

			this.$dots.remove();

		}

		return false;

	}

	// redefine the jmpress setActive method
	this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {

		// change the pagination dot active class
		if( _self.options.dots ) {

			// adds the current class to the current dot/page
			_self.$dots
				 .children()
				 .removeClass( 'jms-dots-current' )
				 .eq( slide.index() )
				 .addClass( 'jms-dots-current' );

		}

		// delete all current bg colors
		this.removeClass( _self.colors );
		// add bg color class
		this.addClass( slide.data( 'color' ) );

	} );

	// add step's bg color to the wrapper
	this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );

},

The _startSlideshow and _stopSlideshow will start and stop the slideshow respectively if the option autoplay is set to true.

// start slideshow if autoplay is true
	_startSlideshow		: function() {

		var _self	= this;

		this.slideshow	= setTimeout( function() {

			_self.$jmsWrapper.jmpress( 'next' );

			if( _self.options.autoplay ) {

				_self._startSlideshow();

			}

		}, this.options.interval );

	},
	// stops the slideshow
	_stopSlideshow		: function() {

		if( this.options.autoplay ) {

			clearTimeout( this.slideshow );
			this.options.autoplay	= false;

		}

	},

Finally, we load the events for the navigation arrows and dots. The touchend event is already defined in the jmpress plugin, but we will need to stop the slideshow in case this event is triggered:

_loadEvents			: function() {

	var _self = this;

	// navigation arrows
	if( this.$arrowPrev && this.$arrowNext ) {

		this.$arrowPrev.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'prev' );

			return false;

		} );

		this.$arrowNext.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'next' );

			return false;

		} );

	}

	// navigation dots
	if( this.$dots ) {

		this.$dots.children().on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );

			return false;

		} );

	}

	// the touchend event is already defined in the jmpress plugin.
	// we just need to make sure the slideshow stops if the event is triggered
	this.$jmsWrapper.on( 'touchend.jmslideshow', function() {

		_self._stopSlideshow();

	} );

}

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

View demo Download source

Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

We will be using a couple of useful jQuery plugins:

• History.js by Benjamin Lupton
• jScrollPane by Kelvin Luck
• jquery-sparkle by Benjamin Lupton
• jquery.easing
• jquery.smartresize by Louis Remi

In the demo we are using Charles Darwin’s The Origin of Species by means of Natural Selection, 6th Edition which you can find as an e-book on Project Gutenberg.

The Markup

The HTML will be built up of a menu that will be fixed at the left side and a container with all the individual panels inside. All will be wrapped by a main container:

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

	<!-- ... -->

</div>

The menu will have the following structure:

<aside class="hs-menu" id="hs-menu">

	<div class="hs-headline">
		<h1>
			<small>The</small>
			Origin <small>of</small>
			Species
		</h1>
		<small>6<sup>th</sup> Edition</small>
		<span class="author">by Charles Darwin</span>
	</div>

	<nav>
		<a href="#introduction">
			<span>Introduction</span>
		</a>
		<a href="#chapter1">
			<span>Chapter I.</span>
			<span>Variation under Domestication</span>
		</a>
		<a href="#chapter2">
			<span>Chapter II.</span>
			<span>Variation Under Nature </span>
		</a>
		<!-- ... -->
	</nav>

</aside>

<a href="#hs-menu" class="hs-totop-link">Go to the top</a>

We’ll have a headline and a navigation. We’ve also added a loose helper link that we’ll need to show for smaller screens where we will stack the content vertically.

The content will have the following structure:

<div class="hs-content-scroller">

	<div class="hs-content-wrapper">

		<article class="hs-content" id="introduction">
			<div class="hs-inner">
				<h2>Introduction</h2>
				<p>...</p>
			</div>
		</article>

		<article class="hs-content" id="chapter1">
			<div class="hs-inner">
				<h2>Chapter I.</h2>
				<h3>Variation Under Domestication</h3>
				<h4>Causes of Variability</h4>
				<p>...</p>
			</div>
		</article>

		<!-- ... -->

	</div>

</div>

The first wrapper with the class hs-content-scroller will act like a mask, having the width and height that is visible in the viewport. This will be the division that we’ll scroll horizontally because the second wrapper with the class hs-content-wrapper will be as wide as the sum of all article widths.

As you can see, each article will get an ID which we link to in our navigation.

Let’s style this thing.

The CSS

So, our main aim is to fix the sidebar at the left side of the screen and place the content as a horizontal stack.
Let’s first style the body and some headings. We’ll set both, overflow-x and overflow-y to hidden. We use the separate properties instead of the single “overflow” because we want to adjust something in a media query later, but we’ll get back to that.

We’ll first import the normalize.css, a really nice and sensible alternative to the common resets:

@import url('normalize.css');

body{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
	background: #e9f0f5 url(../images/pattern.png) repeat top left;
	font-weight: 400;
	font-size: 12px;
	color: #333;
	overflow-y: hidden;
	overflow-x: hidden;
}

Next, let’s define some general text styles:

h1, h3, h4{
	font-weight: 400;
}
h1{
	font-style: italic;
	border-bottom: 1px solid rgba(126, 126, 126, 0.3);
	padding: 35px 15px 15px 15px;
	margin: 0px 20px 20px 20px;
	position: relative;
	font-size: 38px;
}
h2{
	font-size: 40px;
	padding-bottom: 15px;
	border-bottom: 5px solid rgba(190, 211, 226, 0.2);
	color: #a9becd;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	font-weight: 700;
}
h3{
	font-style: italic;
	font-size: 26px;
	color: #585959;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4);
}
h4{
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 20px;
	padding: 10px 0px;
	color: #626a6f;
	border-bottom: 1px solid rgba(126, 126, 126, 0.1);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}
a{
	color: #308fd9;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}
a:hover{
	color: #87b6da;
}
.hs-headline{
	text-align: center;
}
.hs-author{
	text-transform: uppercase;
	display: block;
	letter-spacing: 2px;
	font-weight: 700;
	padding: 20px 10px;
}

Now, let’s position the menu:

.hs-menu{
	position: fixed;
	z-index: 100;
	color: #f8f8f8;
	background: #131313;
	width: 200px;
	left: 0px;
	top: 0px;
	height: 100%;
}

Setting its position to fixed, we’ll stick the sidebar to the left side of the screen.
The navigation will have the following style:

.hs-menu nav{
	position: absolute;
	top: 250px;
	left: 0px;
	right: 0px;
	bottom: 50px;
}

The position of the navigation will be absolute and by setting a top and bottom value, we have a flexible height. Later, we will add custom scrolling to the navigation so that we don’t have to worry about the menu items fitting into the area.

The anchors will have the following style:

.hs-menu nav a{
	display: block;
	padding: 10px 20px;
	text-align: center;
	outline: none;
	border-bottom: 1px dashed rgba(126, 126, 126, 0.2);
}
.hs-menu nav a:active{
	box-shadow: 7px 0px 17px #000 inset;
}
.hs-menu nav a:first-child{
	border-top: 1px dashed rgba(126, 126, 126, 0.2);
}

The second span in a navigation anchor will be styled differently:

.hs-menu nav a span:nth-child(2){
	display: block;
	color: #fff;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	padding-top: 3px;
}

Now, let’s style the content part. As mentioned before, the division with the class .hs-content-scroller will be acting as a mask where any overflow won’t be visible. This is basically the same principle as in sliders. The left will be set to 200 pixel because of the sidebar:

.hs-content-scroller{
	position: absolute;
	left: 200px;
	right: 0px;
	overflow: hidden;
	height: 100%;
}

The next wrapper will have a width which allows all the inner content panels to fit inside of it if stacked horizontally. We’ll set the overflow to hidden, because each of our content panels will have a custom scroll bar.

.hs-content-wrapper{
	width: 7950px;
	position: absolute;
	height: 100%;
	overflow: hidden;
}

Each content panel is going to have a width of 500 pixel and float left. We’ll add a transition for the background when we hover and when we add a active class:

.hs-content{
	width: 500px;
	overflow-y: scroll;
	height: 100%;
	float: left;
	border-right: 1px dashed rgba(126, 126, 126, 0.2);
	border-left: 1px dashed rgba(255, 255, 255, 0.5);
	background: transparent;
	transition: background 0.3s linear;
}
.hs-content:hover, .hs-content-active{
	background: #f1f5f8;
}

When we add the custom scrolling to the content panels, we only want them to be visible when we hover over them:

.hs-content:hover .jspVerticalBar,
.hs-menu nav:hover .jspVerticalBar{
	opacity: 1;
}

The first content panel will be a bit narrower:

.hs-content:first-child{
	width: 400px;
}

Let’s add some padding and style the text elements:

.hs-inner{
	padding: 30px 20px 10px 30px;
}
.hs-inner p{
	font-size: 18px;
	line-height: 24px;
	text-align: justify;
	position: relative;
	padding: 10px 0px;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.8);
}
.hs-inner p:first-letter{
	font-size: 28px;
}
#introduction .hs-inner p:first-of-type{
	font-size: 24px;
	text-align: left;
	line-height: 36px;
	font-style: italic;
	color: #75838D;
	letter-spacing: 0px;
}

Remember that little anchor right after the sidebar? When clicking that anchor, the page will scroll up. We’ll only need this anchor when our screen is not big enough to stack the content panels horizontally but only vertically, so we’ll set it to display: none initially. In a media query we’ll then show it.

a.hs-totop-link{
	display: none;
	position: fixed;
	z-index: 10000;
	bottom: 0px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #aaa;
	text-shadow: 1px 1px 1px #fff;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
	border-top: 1px solid #cacaca;
}

When we reach the size of the iPad, we want to get rid of the hover behavior and show the horizontal scrollbar. This will allow us to “swipe” the content on the iPad:

/* Media Queries */
@media screen and (max-width: 1024px) {
	.jspVerticalBar{
		opacity: 1;
	}
	.hs-content-scroller{
		overflow-x: scroll;
	}
	.hs-content:hover{
		background: transparent;
	}
	.hs-content-active:hover {
		background: #f1f5f8;
	}
}

At this point, we’ll change the layout in order to be stacked vertically. We have to “reset” all the properties that forced the content to be stacked horizontally. We’ll also show the anchor that will bring us back to the top:

@media screen and (max-width: 715px) {
	body{
		overflow-x: auto;
		overflow-y: auto;
	}
	a.hs-totop-link{
		display: block;
	}
	.hs-menu{
		position: relative;
		width: 100%;
		height: 460px;
	}
	.hs-menu nav{
		top: 230px;
		bottom: 20px;
	}
	.hs-content-scroller{
		position: relative;
		height: auto;
		left: 0;
	}
	.hs-content-wrapper{
		height: auto;
		width: auto;
		margin-left: 0px;
	}
	.hs-content{
		border: none;
	}
	.hs-content, .hs-content:first-child{
		width: auto;
		float: none;
		overflow-y: auto;
	}
}

And that’s all the style! Now, let’s take a look at the JavaScript!

The JavaScript

First, we will set some variables and cache some elements:

var $container			= $( '#hs-container' ),
	// the scroll container that wraps the articles
	$scroller			= $container.find( 'div.hs-content-scroller' ),
	$menu				= $container.find( 'aside' ),
	// menu links
	$links				= $menu.find( 'nav > a' ),
	$articles			= $container.find( 'div.hs-content-wrapper > article' ),
	// button to scroll to the top of the page
	// only shown when screen size < 715
	$toTop				= $container.find( 'a.hs-totop-link' ),
	// the browser nhistory object
	History 			= window.History,
	// animation options
	animation			= { speed : 800, easing : 'easeInOutExpo' },
	// jScrollPane options
	scrollOptions		= { verticalGutter : 0, hideFocus : true },

The init function will be the first one to execute:

init				= function() {

	// initialize the jScrollPane on both the menu and articles
	_initCustomScroll();
	// initialize some events
	_initEvents();
	// sets some css properties
	_layout();
	// jumps to the respective chapter
	// according to the url
	_goto();

},

The first step is to create / initialize the jScrollPane (the custom scrollbars) on both the menu and the articles. However, for the articles, we will not do this in case the screen size is smaller than 715px:

_initCustomScroll	= function() {

	// Only add custom scrolling to articles if screen size > 715.
	// If not, the articles will be expanded (vertical layout)
	if( $(window).width() > 715 ) {

		$articles.jScrollPane( scrollOptions );

	}
	// add custom scrolling to menu
	$menu.children( 'nav' ).jScrollPane( scrollOptions );

},

We will load the events for the window, the menu links and the articles.

On window resize, we will need to reinitialize the jScrollPane custom scrollbars, or destroy them in case the screen's size gets smaller than 715px.

On window statechange, we will jump to the respective state / chapter. We are using History.js by Benjamin Lupton to control the history states when the user navigates through the page:

$(window).on({
	// when resizing the window we need to reinitialize or destroy the jScrollPanes
	// depending on the screen size
	'smartresize' : function( event ) {

		_layout();

		$('article.hs-content').each( function() {

			var $article 	= $(this),
				aJSP		= $article.data( 'jsp' );

			if( $(window).width() > 715 ) {

				( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

				_initArticleEvents();

			}
			else {

				// destroy article's custom scroll if screen size <= 715px
				if( aJSP !== undefined )
					aJSP.destroy();

				$container.off( 'click', 'article.hs-content' );

			}

		});

		var nJSP = $menu.children( 'nav' ).data( 'jsp' );
		nJSP.reinitialise();

		// jumps to the current chapter
		_goto();

	},
	// triggered when the history state changes - jumps to the respective chapter
	'statechange' : function( event ) {

		_goto();

	}
});

When we click on an article or menu link, we will check to which chapter it refers to, and we will change the state of the browser history object. This will trigger the statechange event which in turn will make the page / scrolling division jump to the respective area.

$links.on( 'click', function( event ) {

	var href		= $(this).attr('href'),
		chapter		= ( href.search(/chapter/) !== -1 ) ? href.substring(8) : 0;

	_saveState( chapter );

	return false;

});

$container.on( 'click', 'article.hs-content', function( event ) {

	var id			= $(this).attr('id'),
		chapter		= ( id.search(/chapter/) !== -1 ) ? id.substring(7) : 0;

	_saveState( chapter );

	return false;

});

_saveState			= function( chapter ) {

	// adds a new state to the history object
	// this will trigger the statechange on the window
	if( History.getState().url.queryStringToJSON().chapter !== chapter ) {

		History.pushState( null, null, '?chapter=' + chapter );

	}

},

We will also control the overflow property of the "scroller" (divison with class "hs-content-scroller") according to the screen size.

_layout				= function() {

	var windowWidth	= $(window).width();
	switch( true ) {

		case ( windowWidth <= 715 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
		case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'scroll' ); break;
		case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;

	};

},

The _goto function triggers the animation for changing the area / chapter on the page. We get the current chapter from the history state URL, and given the respective article we either scroll to the left or top depending on the screen size. Also, if we are in landscape mode, the element scrolling is the div "hs-content-scroller", otherwise it's the BODY element.

_goto				= function( chapter ) {

	// get the url from history state (e.g. chapter=3) and extract the chapter number
var chapter 	= chapter || History.getState().url.queryStringToJSON().chapter,
	isHome		= ( chapter === undefined ),
	// we will jump to the introduction chapter if theres no chapter
	$article 	= $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

	if( $article.length ) {

			// left / top of the element
		var left		= $article.position().left,
			top			= $article.position().top,
			// check if we are scrolling down or left
			// is_v will be true when the screen size < 715
			is_v		= ( $(document).height() - $(window).height() > 0 ),
			// animation parameters:
			// if vertically scrolling then the body will animate the scrollTop,
			// otherwise the scroller (div.hs-content-scroller) will animate the scrollLeft
			param		= ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
			$elScroller	= ( is_v ) ? $( 'html, body' ) : $scroller;

		$elScroller.stop().animate( param, animation.speed, animation.easing, function() {

			// active class for selected chapter
			$articles.removeClass( 'hs-content-active' );
			$article.addClass( 'hs-content-active' );

		} );

	}

},

And that's it! I hope you enjoyed this tutorial and find it useful!

View demo Download source