This repository has been archived by the owner on May 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 110
/
index.html
20 lines (20 loc) · 1.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no maximum-scale=1">
<title>JavaScript Kinetic Scrolling</title>
<link rel="stylesheet" href="css/pure-nr-min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pure-u-1" id="view">
<aside><h1>JavaScript Kinetic Scrolling</h1></aside>
<p>#1: <strong>Basic drag-and-scroll</strong> (<a href="1/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html">explanation</a>).<br/>No momentum effect yet, just a plain scroll view.</p>
<p>#2: <strong>Flick list</strong> with momentum (<a href="2/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html">explanation</a>).<br/>Smooth acceleration and deceleration.</p>
<p>#3: <strong>Snap-to-grid </strong> flick list (<a href="3/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-3.html">explanation</a>).<br/>Inertial deceleration to stop at the right position.</p>
<p>#4: <strong>Horizontal swipe</strong> to browse photos (<a href="4/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-4.html">explanation</a>).<br/>Parallax effect included.</p>
<p>#5: <strong>Cover Flow</strong> with CSS transform (<a href="5/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html">explanation</a>).<br/>Flipping images in 3-D space.</p>
<p>#6: <em>Coming soon</em>.</p>
</div>
</body>
</html>