Hi everyone!

This is a simple web page with horizontal scrolling ...and nice "no-script" fallback!

It can contain any number of "blocks" with different width and height Feel free to create rotated or skewed blocks with fixed or scrollable background

Here is the basic markup:

Two classes "main" and "screen" that describe structure and one – helper with number – for customizations.
You should use semantic class names not numbers.. here is just example

	
	<body>
		...
		<section class="main">			
			<div class="screen screen-first"></div>
			<div class="screen screen-second"></div>
			<div class="screen screen-third"></div>
			<div class="screen screen-fourth"></div>	
			<div class="screen screen-fifth"></div>	
			<div class="screen screen-sixth"></div>
			<div class="screen screen-seventh"></div>	
			<div class="screen screen-eighth"></div>							
		</section>
		...
	</body>			
					

Each "screen" may contain special "container" class for content, like this:


	<div class="screen screen-first">
		<div class="container">										
			<!-- Here comes your content -->
		</div>
	</div>
					

Also you can replace <div> for some more semantic elements, like <section> or <article>, depends of purpose

A few words about javascript before talking about styles

In markup we have default "no-js" class that turns to "js" when javascript is enabled:


<html class="no-js"><!-- no-js class for fallback -->
	<head>
		...
		<script type="text/javascript">document.documentElement.className = 
		document.documentElement.className.replace("no-js","js");</script>
		<!-- turns "no-js" class to "js" when javascript is enabled -->
		...
	</head>
	...
</html>					
					

So we can create some extra styles for browsers with disabled javascript. Why we need it?
- There is some reason. For mousewheel horizontal scroll we use javascript scroll converter and when js is disabled we unable to scroll page.

But there is solution!

Please take a look next "screen" with stylesheets for more details

At first, now let`s check basic styles:



body {	
	overflow-y: hidden; /*hide vertical and keep horizontal scrollbar*/
}					
	.main{
		width: 100%;
		height: 100%;
		white-space: nowrap;
	}			
		.screen{	
			display: inline-block;
			width: 100%;
			height: 100%;
			margin-left:-4px; /*delete vertical spaces between "screens"*/
			vertical-align: middle;
			overflow: hidden;
			white-space: normal;
			line-height: 1.2;
		}		
			.screen-first { 
					background: url("../img/1b3E67J.jpg") center center no-repeat; 
					background-attachment: fixed;
					-webkit-background-size: cover;
							background-size: cover;
			} /*here is background style only for one of seven blocks, cause they are similar*/
					

And that`s all. Almost.. there are some styles "no-js" fallback

Here come styles for "no-js" fallback

It`s pretty simple: if javascript doesn`t work and we have only vertical scroll – let`s make vertical layout for our page!



.no-js body {
	overflow-y: auto; /*show vertical scrollbar*/
}	
	.no-js .main{
		white-space: normal;
	}
		.no-js .screen {
			display: block;
			width: 100%;
			height: auto;
			min-height: 720px;
			margin: 0 auto;
		}
					

Now we have cool vertical layout as no-js fallback with the same blocks, it looks like pretty good;)

Feel free to test it right now!

You can disable javascript in your browser and refresh page or check this page, that looks like our no-js fallback...

One useful thing for this layout:

When we turn display to portrait orientation – horizontal layout looks not so good as wanted. So for portrait orientation logically to use vertical layout with vertical scrolling
To do this we need to use "no-script" fallback styles and to disable scroll converter when screen turns to portrait orientation.


@media (orientation:portrait){
	/* Here comes "noscript" fallback styles from previous slide */
}
					

And this is javascript to detect orientation changes and deactivate scroll converter.


(function () {
	var mql = window.matchMedia("(orientation: landscape)");
	//activate plugin only when orientation is landscape
	if(mql.matches) {  
			scrollConverter.activate();
	}		
	//listen for orientation changes and if it was changed - reload page without plugin activation
	// or activate plugin again when orientation turns back to landscape
	mql.addListener(function(m) {
		if(m.matches) {
			scrollConverter.activate();
		}	
		else {	
			window.location.reload();
		}
	});
}());
					

That`s all!

Compatible browsers: IE9+, Firefox, Chrome, Opera, Safari, Yandex.browser

You can download source code here or fork me on github

I hope this little experiment will help you to create some awesome things or inspire further experiments Thank you for watching!