index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DD::Demo</title>
	<!-- Fonts API -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="dd-wrapper">
		<div class="dd-center-content">
			<h1 class="dd-title">Hover text effects</h1>
			<div class="dd-elements">
				<h2 class="title top" data-letters="Text hover effect from top!">Text hover effect from top!</h2>
			    <h2 class="title bottom" data-letters="Text hover effect from bottom!">Text hover effect from bottom!</h2>
			    <h2 class="title left" data-letters="Text hover effect from left!">Text hover effect from left!</h2>
			    <h2 class="title right" data-letters="Text hover effect from right!">Text hover effect from right!</h2>
			</div>
		</div>
	</div>
</body>
</html>