basic layout, defilement horizontal avec effet de parallax

dabblet.css

/* basic layout, defilement horizontal avec effet de parallax  */

figure {
	overflow:auto;
	white-space:nowrap;
}
figure div {
	display:inline-block; 
	width:100%;
	text-align:center;
	vertical-align:top;
	background:linear-gradient(90deg, transparent,gold,transparent);
	}
div:nth-child(even) {
	background:
		linear-gradiet(90deg,transparent, rgba(0,0,0,0.5),transparent, rgba(0,0,0,0.5),transparent);
	}

/* makup */
html {
	display:table;
	height:100%;
	width:100%;
	table-layout:fixed;
	max-width:1200px;
	margin:0 auto;
}
body {
	display:table-cell;
	vertical-align:middle;
	text-shadow:-1px -1px 0px #999;
	background:gold;background:
		linear-gradient(30deg,transparent,rgba(0,0,0,0.025),transparent),
		linear-gradient(-55deg,transparent,rgba(0,0,0,0.025),transparent),
		linear-gradient(0deg,white,gold,gold,gold,white);
	background-size:
		1em 0.5em,
		0.5em 1em,
		100%;
	background-position:
		0.75em  0, 
		0.5em 0.5em, 
		top;
	margin:0;
	table-layout:fixed;
	font-family:georgia;
}
header,footer {
	text-align:center;
	background: 
		linear-gradient( 45deg,transparent,#333,transparent),
		linear-gradient(-45deg,transparent,#333,transparent);
	background-color:orange;
	box-shadow:0 0 15px 3px black;
	background-size:15px 20px;
	padding:5px;
	color:white;
	margin-bottom:-1em; 
}

figure {

	background-color:orange;
	background-image:
		linear-gradient(30deg,transparent,rgba(0,0,0,0.05),transparent) ,
		linear-gradient(-55deg,transparent,rgba(0,0,0,0.05),transparent);
	background-size:
		1em 0.5em,
		0.5em 1em;
	box-shadow:0 0 3px black,  0 0 15px 3px black;
	animation:glisse 70s infinite ;
	animation-play-state: paused;
	overflow-x:scroll;
 }
 figure div:nth-child(8) {
 	background:
	 	url(http://lorempixel.com/640/480/abstract/4/GCyrillus-CSS) 
	 	center 
	 	no-repeat;
 	}
figure:hover{
	animation:glisse 70s infinite ;
	animation-play-state:running;
}
figure:after {
	content:" Gcyrillus' CSS";
	font-size:3em;color:#333,
	padding:0 0.25em;
	text-indent:0.25em;
	line-height:480px;
	display:inline-block;
	text-indent:-200%;
	width:100%;
	vertical-align:middle;
}
img {
	min-width:40%;
	}
h2, ul {
	padding:0;
	margin:1em 0;
	text-align:center;
	}

@keyframes glisse {
45%, 55% {text-indent:-700%;}
0%,5%,100% {text-indent: 3px;margin-bottom:-1em;}
}

dabblet.html

<header>
	<h1>Mode lorempixel</h1>
</header>
<figure>
	<div><img src="http://lorempixel.com/640/480/fashion/1"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/2"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/3"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/4"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/5"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/6"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/7"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/8"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/9"  alt="mode" /></div>
	<div><img src="http://lorempixel.com/640/480/fashion/10" alt="mode" /></div>
</figure>
<footer>
	<p>Image de lorempixel.com </p>
</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}