<!DOCTYPE html>
<html lang="en">
<head>
<title>jq横向滑动排版效果 - 网页模板</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
<script type="text/javascript" src="js/modernizr.custom.11333.js"></script>
</head>
<body>
<div class="container">
<h1></h1>
<h2 class="ss-subtitle">jq横向滑动排版效果</h2>
<div id="ss-links" class="ss-links">
<a href="#november">Nov</a>
<a href="#october">Oct</a>
<a href="#september">Sep</a>
<a href="#august">Aug</a>
<a href="#july">Jul</a>
<a href="#june">Jun</a>
</div>
<div id="ss-container" class="ss-container">
<div class="ss-row">
<div class="ss-left">
<h2 id="november">November</h2>
</div>
<div class="ss-right">
<h2>2013</h2>
</div>
</div>
<div class="ss-row ss-medium">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-1">Typography Effects with CSS3 and jQuery</a>
</div>
<div class="ss-right">
<h3>
<span>November 28, 2013</span>
<a href="http://www.moobnn.com/">Typography Effects with CSS3 and jQuery</a>
</h3>
</div>
</div>
<div class="ss-row ss-large">
<div class="ss-left">
<h3>
<span>November 22, 2013</span>
<a href="http://www.moobnn.com/">Hover and Click Trigger for Circular Elements with jQuery</a>
</h3>
</div>
<div class="ss-right">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-2">Hover and Click Trigger for Circular Elements with jQuery</a>
</div>
</div>
<div class="ss-row ss-small">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-3">Elastic Image Slideshow with Thumbnail Preview</a>
</div>
<div class="ss-right">
<h3>
<span>November 21, 2013</span>
<a href="http://www.moobnn.com/">Elastic Image Slideshow with Thumbnail Preview</a>
</h3>
</div>
</div>
<div class="ss-row ss-medium">
<div class="ss-left">
<h3>
<span>November 18, 2013</span>
<a href="http://www.moobnn.com/">Fullscreen Image Blur Effect with HTML5</a>
</h3>
</div>
<div class="ss-right">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-4">Fullscreen Image Blur Effect with HTML5</a>
</div>
</div>
<div class="ss-row ss-large">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-5">Interactive Typography Effects with HTML5</a>
</div>
<div class="ss-right">
<h3>
<span>November 9, 2013</span>
<a href="http://www.moobnn.com/">Interactive Typography Effects with HTML5</a>
</h3>
</div>
</div>
<div class="ss-row ss-small">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-6">Animated Buttons with CSS3</a>
</div>
<div class="ss-right">
<h3>
<span>November 7, 2013</span>
<a href="http://www.moobnn.com/">Animated Buttons with CSS3</a>
</h3>
</div>
</div>
<div class="ss-row ss-medium">
<div class="ss-left">
<h3>
<span>November 2, 2013</span>
<a href="http://www.moobnn.com/">Original Hover Effects with CSS3</a>
</h3>
</div>
<div class="ss-right">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-7">Original Hover Effects with CSS3</a>
</div>
</div>
<div class="ss-row">
<div class="ss-left">
<h2 id="october">October</h2>
</div>
<div class="ss-right">
<h2>2013</h2>
</div>
</div>
<div class="ss-row ss-small">
<div class="ss-left">
<h3>
<span>October 31, 2013</span>
<a href="http://www.moobnn.com/">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
</h3>
</div>
<div class="ss-right">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-8">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
</div>
</div>
<div class="ss-row ss-large">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-9">Creative CSS3 Animation Menus</a>
</div>
<div class="ss-right">
<h3>
<span>October 24, 2013</span>
<a href="http://www.moobnn.com/">Creative CSS3 Animation Menus</a>
</h3>
</div>
</div>
<div class="ss-row ss-medium">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-10">Blur Menu with CSS3 Transitions</a>
</div>
<div class="ss-right">
<h3>
<span>October 19, 2013</span>
<a href="http://www.moobnn.com/">Blur Menu with CSS3 Transitions</a>
</h3>
</div>
</div>
<div class="ss-row ss-large">
<div class="ss-left">
<h3>
<span>October 17, 2013</span>
<a href="http://www.moobnn.com/">Wave Display Effect with jQuery</a>
</h3>
</div>
<div class="ss-right">
<a href="http://www.moobnn.com/" class="ss-circle ss-circle-11">Wave Display Effect with jQuery</a>
</div>
</div>
<div class="ss-row ss-small">
<div class="ss-left">
<a href="http://www.moobnn.com/" class="ss-circle