HoverScroll

dabblet.css

/**
 * HoverScroll
 */

.wrapper {
	margin: 0 auto;
	width: 450px;
}

.hScroll {
	background: #F7F7F7;
	border-radius: .125em;
	box-shadow: inset 0 2px 8px #E7E7E7;
	overflow: hidden;
	white-space: nowrap;
}

.scrollWrapper {
	color: #333;
	text-decoration: none;
	text-shadow: 0 1px #FFF;
	padding: .5em .5em 1em;
}

.scrollWrapper,
.scrollHandle {
	display: inline-block;
	position: relative;
	transition: all 2s;
}

.scrollHandle {
	box-shadow: 0 .125em 0 .125em #D7D7D7,
				0 8000px 0 8000px #E7E7E7;
	height: 0;
	position: relative;
	top: 1em;
	width: 0;
}

.hScroll:hover .scrollWrapper {
	left: -1em;
	margin-left: 100%;
}
.hScroll:hover .scrollHandle {
	left: 100%;
	margin-left: -100%;
}

dabblet.html

<div class="wrapper">
	<h1 class="hScroll"><a href="#" class="scrollWrapper"><span class="scrollHandle"></span>Lorem ipsum dolor site ipsum dolor site ipsum dolor site ipsum dolor site.</a></h1>
	dzdzdzdz
</div>

settings.json

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