How to Create Responsive Horizontal Layout with Several Content Panels

Demo        -        Download        -        Source

Tutorial 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.