├── 1 ├── scroll.js └── index.html ├── 2 ├── scroll.js └── index.html ├── 3 ├── scroll.js └── index.html ├── 4 ├── images │ ├── 0.jpg │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html └── scroll.js ├── 5 ├── images │ ├── 14.jpg │ ├── koban.jpg │ ├── winter.jpg │ ├── inferno.jpg │ ├── renegade.jpg │ ├── cloudatlas.jpg │ ├── fiftyshades.jpg │ ├── greatgatsby.jpg │ └── dancewithdragons.jpg ├── index.html └── coverflow.js ├── LICENSE-MIT ├── README.md ├── js └── raf.js ├── index.html └── css ├── style.css └── pure-nr-min.css /4/images/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/0.jpg -------------------------------------------------------------------------------- /4/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/1.jpg -------------------------------------------------------------------------------- /4/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/2.jpg -------------------------------------------------------------------------------- /4/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/3.jpg -------------------------------------------------------------------------------- /4/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/4.jpg -------------------------------------------------------------------------------- /4/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/5.jpg -------------------------------------------------------------------------------- /4/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/6.jpg -------------------------------------------------------------------------------- /4/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/7.jpg -------------------------------------------------------------------------------- /4/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/8.jpg -------------------------------------------------------------------------------- /4/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/4/images/9.jpg -------------------------------------------------------------------------------- /5/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/14.jpg -------------------------------------------------------------------------------- /5/images/koban.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/koban.jpg -------------------------------------------------------------------------------- /5/images/winter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/winter.jpg -------------------------------------------------------------------------------- /5/images/inferno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/inferno.jpg -------------------------------------------------------------------------------- /5/images/renegade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/renegade.jpg -------------------------------------------------------------------------------- /5/images/cloudatlas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/cloudatlas.jpg -------------------------------------------------------------------------------- /5/images/fiftyshades.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/fiftyshades.jpg -------------------------------------------------------------------------------- /5/images/greatgatsby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/greatgatsby.jpg -------------------------------------------------------------------------------- /5/images/dancewithdragons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ariya/kinetic/HEAD/5/images/dancewithdragons.jpg -------------------------------------------------------------------------------- /4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Kinetic Scrolling 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CoverFlow 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (C) 2013 Ariya Hidayat 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Kinetic Scrolling 2 | 3 | \#1: **Basic drag-and-scroll** ([demo](http://ariya.github.io/kinetic/1/), [explanation](http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html)).
4 | No momentum effect yet, just a plain scroll view. 5 | 6 | \#2: **Flick list** with momentum ([demo](http://ariya.github.io/kinetic/2), [explanation](http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html)).
7 | Smooth acceleration and deceleration. 8 | 9 | \#3: **Snap-to-grid** flick list ([demo](http://ariya.github.io/kinetic/3), [explanation](http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-3.html)).
10 | Inertial deceleration to stop at the right position. 11 | 12 | \#4: **Horizontal swipe** to browse photos ([demo](http://ariya.github.io/kinetic/4), [explanation](http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-4.html)).
13 | Parallax effect included. 14 | 15 | \#5: **Cover Flow** with CSS transform ([demo](http://ariya.github.io/kinetic/5), [explanation](http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html)).
16 | Flipping images in 3-D space 17 | 18 | \#6: _Coming soon_. 19 | -------------------------------------------------------------------------------- /js/raf.js: -------------------------------------------------------------------------------- 1 | /* 2 | * raf.js 3 | * https://github.com/ngryman/raf.js 4 | * 5 | * original requestAnimationFrame polyfill by Erik Möller 6 | * inspired from paul_irish gist and post 7 | * 8 | * Copyright (c) 2013 ngryman 9 | * Licensed under the MIT license. 10 | */ 11 | 12 | (function(window) { 13 | var lastTime = 0, 14 | vendors = ['webkit', 'moz'], 15 | requestAnimationFrame = window.requestAnimationFrame, 16 | cancelAnimationFrame = window.cancelAnimationFrame, 17 | i = vendors.length; 18 | 19 | // try to un-prefix existing raf 20 | while (--i >= 0 && !requestAnimationFrame) { 21 | requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame']; 22 | cancelAnimationFrame = window[vendors[i] + 'CancelRequestAnimationFrame']; 23 | } 24 | 25 | // polyfill with setTimeout fallback 26 | // heavily inspired from @darius gist mod: https://gist.github.com/paulirish/1579671#comment-837945 27 | if (!requestAnimationFrame || !cancelAnimationFrame) { 28 | requestAnimationFrame = function(callback) { 29 | var now = +Date.now(), 30 | nextTime = Math.max(lastTime + 16, now); 31 | return setTimeout(function() { 32 | callback(lastTime = nextTime); 33 | }, nextTime - now); 34 | }; 35 | 36 | cancelAnimationFrame = clearTimeout; 37 | } 38 | 39 | // export to window 40 | window.requestAnimationFrame = requestAnimationFrame; 41 | window.cancelAnimationFrame = cancelAnimationFrame; 42 | }(window)); 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Kinetic Scrolling 6 | 7 | 8 | 9 | 10 |
11 | 12 |

#1: Basic drag-and-scroll (demo, explanation).
No momentum effect yet, just a plain scroll view.

13 |

#2: Flick list with momentum (demo, explanation).
Smooth acceleration and deceleration.

14 |

#3: Snap-to-grid flick list (demo, explanation).
Inertial deceleration to stop at the right position.

15 |

#4: Horizontal swipe to browse photos (demo, explanation).
Parallax effect included.

16 |

#5: Cover Flow with CSS transform (demo, explanation).
Flipping images in 3-D space.

17 |

#6: Coming soon.

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /1/scroll.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var view, indicator, relative, 5 | min, max, offset, reference, pressed, xform; 6 | 7 | function ypos(e) { 8 | // touch event 9 | if (e.targetTouches && (e.targetTouches.length >= 1)) { 10 | return e.targetTouches[0].clientY; 11 | } 12 | 13 | // mouse event 14 | return e.clientY; 15 | } 16 | 17 | function scroll(y) { 18 | offset = (y > max) ? max : (y < min) ? min : y; 19 | view.style[xform] = 'translateY(' + (-offset) + 'px)'; 20 | indicator.style[xform] = 'translateY(' + (offset * relative) + 'px)'; 21 | } 22 | 23 | function tap(e) { 24 | pressed = true; 25 | reference = ypos(e); 26 | e.preventDefault(); 27 | e.stopPropagation(); 28 | return false; 29 | } 30 | 31 | function drag(e) { 32 | var y, delta; 33 | if (pressed) { 34 | y = ypos(e); 35 | delta = reference - y; 36 | if (delta > 2 || delta < -2) { 37 | reference = y; 38 | scroll(offset + delta); 39 | } 40 | } 41 | e.preventDefault(); 42 | e.stopPropagation(); 43 | return false; 44 | } 45 | 46 | function release(e) { 47 | pressed = false; 48 | e.preventDefault(); 49 | e.stopPropagation(); 50 | return false; 51 | } 52 | 53 | view = document.getElementById('view'); 54 | if (typeof window.ontouchstart !== 'undefined') { 55 | view.addEventListener('touchstart', tap); 56 | view.addEventListener('touchmove', drag); 57 | view.addEventListener('touchend', release); 58 | } 59 | view.addEventListener('mousedown', tap); 60 | view.addEventListener('mousemove', drag); 61 | view.addEventListener('mouseup', release); 62 | 63 | max = parseInt(getComputedStyle(view).height, 10) - innerHeight; 64 | offset = min = 0; 65 | pressed = false; 66 | 67 | indicator = document.getElementById('indicator'); 68 | relative = (innerHeight - 30) / max; 69 | 70 | xform = 'transform'; 71 | ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { 72 | var e = prefix + 'Transform'; 73 | if (typeof view.style[e] !== 'undefined') { 74 | xform = e; 75 | return false; 76 | } 77 | return true; 78 | }); 79 | }; 80 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | aside { 2 | background: #1f8dd6; 3 | padding: 0.6em 1em; 4 | color: #fff; 5 | } 6 | 7 | #content { 8 | overflow: hidden; 9 | width: 100%; 10 | height: 100%; 11 | position: absolute; 12 | top: 0px; 13 | left: 0px; 14 | } 15 | 16 | #view table { 17 | display: table; 18 | } 19 | 20 | #view p { 21 | margin-left: 1em; 22 | margin-right: 1em; 23 | } 24 | 25 | #view table td { 26 | line-height: 200%; 27 | padding-left: 2em; 28 | } 29 | 30 | .large-text { 31 | font-size: 120%; 32 | } 33 | 34 | div#indicator { 35 | position: absolute; 36 | z-index: 99; 37 | top: 0px; 38 | left: 3px; 39 | width: 4px; 40 | height: 20px; 41 | background-color: #888; 42 | border: none; 43 | margin: 5px 0 5px 0; 44 | } 45 | 46 | div#overlay { 47 | position: absolute; 48 | z-index: 99; 49 | top: 100px; 50 | left: 0px; 51 | background-color: rgba(128, 128, 128, 0.2); 52 | -webkit-user-select: none; 53 | -khtml-user-select: none; 54 | -moz-user-select: moz-none; 55 | -ms-user-select: none; 56 | user-select: none; 57 | } 58 | 59 | div#overlay table { 60 | display: table; 61 | } 62 | 63 | div#overlay table tr { 64 | border: 1px solid #888; 65 | line-height: 200%; 66 | text-align: right; 67 | color: #333; 68 | } 69 | 70 | tr:nth-child(2n-1).blue td, tr.blue td { 71 | background: #1f8dd6; 72 | color: #fff; 73 | } 74 | 75 | img.leftcard { 76 | position: absolute; 77 | top: 0; 78 | left: 0; 79 | z-index: 2; 80 | } 81 | 82 | img.centercard { 83 | position: absolute; 84 | top: 0; 85 | left: 0; 86 | z-index: 1; 87 | } 88 | 89 | img.rightcard { 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | z-index: 2; 94 | } 95 | 96 | div#stash { 97 | visibility: hidden; 98 | } 99 | 100 | div.cover { 101 | perspective: 500px; 102 | -webkit-perspective: 500px; 103 | transform-style: preserve-3d; 104 | -webkit-transform-style: preserve-3d; 105 | } 106 | 107 | div.cover img { 108 | width: 200px; 109 | position: absolute; 110 | top: 0; 111 | left: 0; 112 | opacity: 0; 113 | border: none; 114 | -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.4))); 115 | } -------------------------------------------------------------------------------- /2/scroll.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var view, indicator, relative, 5 | min, max, offset, reference, pressed, xform, 6 | velocity, frame, timestamp, ticker, 7 | amplitude, target, timeConstant; 8 | 9 | function ypos(e) { 10 | // touch event 11 | if (e.targetTouches && (e.targetTouches.length >= 1)) { 12 | return e.targetTouches[0].clientY; 13 | } 14 | 15 | // mouse event 16 | return e.clientY; 17 | } 18 | 19 | function scroll(y) { 20 | offset = (y > max) ? max : (y < min) ? min : y; 21 | view.style[xform] = 'translateY(' + (-offset) + 'px)'; 22 | indicator.style[xform] = 'translateY(' + (offset * relative) + 'px)'; 23 | } 24 | 25 | function track() { 26 | var now, elapsed, delta, v; 27 | 28 | now = Date.now(); 29 | elapsed = now - timestamp; 30 | timestamp = now; 31 | delta = offset - frame; 32 | frame = offset; 33 | 34 | v = 1000 * delta / (1 + elapsed); 35 | velocity = 0.8 * v + 0.2 * velocity; 36 | } 37 | 38 | function autoScroll() { 39 | var elapsed, delta; 40 | 41 | if (amplitude) { 42 | elapsed = Date.now() - timestamp; 43 | delta = -amplitude * Math.exp(-elapsed / timeConstant); 44 | if (delta > 0.5 || delta < -0.5) { 45 | scroll(target + delta); 46 | requestAnimationFrame(autoScroll); 47 | } else { 48 | scroll(target); 49 | } 50 | } 51 | } 52 | 53 | function tap(e) { 54 | pressed = true; 55 | reference = ypos(e); 56 | 57 | velocity = amplitude = 0; 58 | frame = offset; 59 | timestamp = Date.now(); 60 | clearInterval(ticker); 61 | ticker = setInterval(track, 100); 62 | 63 | e.preventDefault(); 64 | e.stopPropagation(); 65 | return false; 66 | } 67 | 68 | function drag(e) { 69 | var y, delta; 70 | if (pressed) { 71 | y = ypos(e); 72 | delta = reference - y; 73 | if (delta > 2 || delta < -2) { 74 | reference = y; 75 | scroll(offset + delta); 76 | } 77 | } 78 | e.preventDefault(); 79 | e.stopPropagation(); 80 | return false; 81 | } 82 | 83 | function release(e) { 84 | pressed = false; 85 | 86 | clearInterval(ticker); 87 | if (velocity > 10 || velocity < -10) { 88 | amplitude = 0.8 * velocity; 89 | target = Math.round(offset + amplitude); 90 | timestamp = Date.now(); 91 | requestAnimationFrame(autoScroll); 92 | } 93 | 94 | e.preventDefault(); 95 | e.stopPropagation(); 96 | return false; 97 | } 98 | 99 | view = document.getElementById('view'); 100 | if (typeof window.ontouchstart !== 'undefined') { 101 | view.addEventListener('touchstart', tap); 102 | view.addEventListener('touchmove', drag); 103 | view.addEventListener('touchend', release); 104 | } 105 | view.addEventListener('mousedown', tap); 106 | view.addEventListener('mousemove', drag); 107 | view.addEventListener('mouseup', release); 108 | 109 | max = parseInt(getComputedStyle(view).height, 10) - innerHeight; 110 | offset = min = 0; 111 | pressed = false; 112 | timeConstant = 325; // ms 113 | 114 | indicator = document.getElementById('indicator'); 115 | relative = (innerHeight - 30) / max; 116 | 117 | xform = 'transform'; 118 | ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { 119 | var e = prefix + 'Transform'; 120 | if (typeof view.style[e] !== 'undefined') { 121 | xform = e; 122 | return false; 123 | } 124 | return true; 125 | }); 126 | }; 127 | -------------------------------------------------------------------------------- /3/scroll.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var view, 5 | min, max, offset, reference, pressed, xform, 6 | velocity, frame, timestamp, ticker, 7 | amplitude, target, timeConstant, 8 | count, overlay, snap; 9 | 10 | function ypos(e) { 11 | // touch event 12 | if (e.targetTouches && (e.targetTouches.length >= 1)) { 13 | return e.targetTouches[0].clientY; 14 | } 15 | 16 | // mouse event 17 | return e.clientY; 18 | } 19 | 20 | function scroll(y) { 21 | offset = (y > max) ? max : (y < min) ? min : y; 22 | view.style[xform] = 'translateY(' + (-offset) + 'px)'; 23 | } 24 | 25 | function track() { 26 | var now, elapsed, delta, v; 27 | 28 | now = Date.now(); 29 | elapsed = now - timestamp; 30 | timestamp = now; 31 | delta = offset - frame; 32 | frame = offset; 33 | 34 | v = 1000 * delta / (1 + elapsed); 35 | velocity = 0.8 * v + 0.2 * velocity; 36 | } 37 | 38 | function autoScroll() { 39 | var elapsed, delta; 40 | 41 | if (amplitude) { 42 | elapsed = Date.now() - timestamp; 43 | delta = -amplitude * Math.exp(-elapsed / timeConstant); 44 | if (delta > 5 || delta < -5) { 45 | scroll(target + delta); 46 | requestAnimationFrame(autoScroll); 47 | } else { 48 | scroll(target); 49 | } 50 | } 51 | } 52 | 53 | function tap(e) { 54 | pressed = true; 55 | reference = ypos(e); 56 | 57 | velocity = amplitude = 0; 58 | frame = offset; 59 | timestamp = Date.now(); 60 | clearInterval(ticker); 61 | ticker = setInterval(track, 100); 62 | 63 | e.preventDefault(); 64 | e.stopPropagation(); 65 | return false; 66 | } 67 | 68 | function drag(e) { 69 | var y, delta; 70 | if (pressed) { 71 | y = ypos(e); 72 | delta = reference - y; 73 | if (delta > 2 || delta < -2) { 74 | reference = y; 75 | scroll(offset + delta); 76 | } 77 | } 78 | e.preventDefault(); 79 | e.stopPropagation(); 80 | return false; 81 | } 82 | 83 | function release(e) { 84 | pressed = false; 85 | 86 | clearInterval(ticker); 87 | target = offset; 88 | if (velocity > 10 || velocity < -10) { 89 | amplitude = 0.8 * velocity; 90 | target = offset + amplitude; 91 | } 92 | target = Math.round(target / snap) * snap; 93 | amplitude = target - offset; 94 | timestamp = Date.now(); 95 | requestAnimationFrame(autoScroll); 96 | 97 | e.preventDefault(); 98 | e.stopPropagation(); 99 | return false; 100 | } 101 | 102 | view = document.getElementById('view'); 103 | if (typeof window.ontouchstart !== 'undefined') { 104 | view.addEventListener('touchstart', tap); 105 | view.addEventListener('touchmove', drag); 106 | view.addEventListener('touchend', release); 107 | } 108 | view.addEventListener('mousedown', tap); 109 | view.addEventListener('mousemove', drag); 110 | view.addEventListener('mouseup', release); 111 | 112 | max = parseInt(getComputedStyle(view).height, 10) - innerHeight; 113 | offset = min = 0; 114 | pressed = false; 115 | timeConstant = 325; // ms 116 | 117 | overlay = document.getElementById('overlay'); 118 | snap = parseInt(getComputedStyle(document.getElementById('row')).height, 10); 119 | overlay.style.top = (4 * snap) + 'px'; 120 | 121 | count = 143; 122 | max = (count - 5) * snap; 123 | 124 | xform = 'transform'; 125 | ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { 126 | var e = prefix + 'Transform'; 127 | if (typeof view.style[e] !== 'undefined') { 128 | xform = e; 129 | return false; 130 | } 131 | return true; 132 | }); 133 | }; 134 | -------------------------------------------------------------------------------- /4/scroll.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var view, images, left, center, right, 5 | index, count, offset, snap, 6 | pressed, reference, amplitude, target, velocity, timeConstant, 7 | xform, frame, timestamp, ticker; 8 | 9 | function initialize() { 10 | var i, stash, el; 11 | 12 | count = 10; 13 | images = []; 14 | index = 0; 15 | offset = 0; 16 | timeConstant = 125; // ms 17 | pressed = false; 18 | 19 | snap = window.innerWidth; 20 | 21 | view = document.getElementById('content'); 22 | left = document.getElementById('1'); 23 | center = document.getElementById('2'); 24 | right = document.getElementById('3'); 25 | 26 | left.setAttribute('width', snap + 'px'); 27 | center.setAttribute('width', snap + 'px'); 28 | right.setAttribute('width', snap + 'px'); 29 | 30 | // Predownloads some images. 31 | stash = document.getElementById('stash'); 32 | for (i = 0; i < count; ++i) { 33 | el = document.createElement('img'); 34 | el.setAttribute('src', 'images/' + i + '.jpg'); 35 | stash.appendChild(el); 36 | images.push(el); 37 | } 38 | } 39 | 40 | function setupEvents() { 41 | if (typeof window.ontouchstart !== 'undefined') { 42 | view.addEventListener('touchstart', tap); 43 | view.addEventListener('touchmove', drag); 44 | view.addEventListener('touchend', release); 45 | } 46 | view.addEventListener('mousedown', tap); 47 | view.addEventListener('mousemove', drag); 48 | view.addEventListener('mouseup', release); 49 | } 50 | 51 | function xpos(e) { 52 | // touch event 53 | if (e.targetTouches && (e.targetTouches.length >= 1)) { 54 | return e.targetTouches[0].clientX; 55 | } 56 | 57 | // mouse event 58 | return e.clientX; 59 | } 60 | 61 | function wrap(x) { 62 | return (x >= count) ? (x - count) : (x < 0) ? x + count : x; 63 | } 64 | 65 | function display(i) { 66 | var id = center.id; 67 | if (i < index) { 68 | id = left.id; 69 | left = document.getElementById(center.id); 70 | } else if (i > index) { 71 | id = right.id; 72 | right = document.getElementById(center.id); 73 | } 74 | center = document.getElementById(id); 75 | index = wrap(i); 76 | 77 | left.setAttribute('src', images[wrap(index - 1)].getAttribute('src')); 78 | center.setAttribute('src', images[index].getAttribute('src')); 79 | right.setAttribute('src', images[wrap(index + 1)].getAttribute('src')); 80 | scroll(0); 81 | left.setAttribute('class', 'leftcard'); 82 | center.setAttribute('class', 'centercard'); 83 | right.setAttribute('class', 'rightcard'); 84 | } 85 | 86 | function scroll(x) { 87 | var slow, fast; 88 | 89 | offset = x; 90 | slow = -Math.round(offset / 2); 91 | fast = -Math.round(offset); 92 | 93 | left.style[xform] = 'translate3d(' + (fast - snap) + 'px, 0, 0)'; 94 | center.style[xform] = 'translate3d(' + slow + 'px, 0, 0)'; 95 | right.style[xform] = 'translate3d(' + (fast + snap) + 'px, 0, 0)'; 96 | } 97 | 98 | function track() { 99 | var now, elapsed, delta, v; 100 | 101 | now = Date.now(); 102 | elapsed = now - timestamp; 103 | timestamp = now; 104 | delta = offset - frame; 105 | frame = offset; 106 | 107 | v = 1000 * delta / (1 + elapsed); 108 | velocity = 0.8 * v + 0.2 * velocity; 109 | } 110 | 111 | function autoScroll() { 112 | var elapsed, delta; 113 | 114 | if (amplitude) { 115 | elapsed = Date.now() - timestamp; 116 | delta = amplitude * Math.exp(-elapsed / timeConstant); 117 | if (delta > 10 || delta < -10) { 118 | scroll(target - delta); 119 | requestAnimationFrame(autoScroll); 120 | } else { 121 | display(index + target / snap); 122 | } 123 | } 124 | } 125 | 126 | function tap(e) { 127 | pressed = true; 128 | reference = xpos(e); 129 | 130 | velocity = amplitude = 0; 131 | frame = offset; 132 | timestamp = Date.now(); 133 | clearInterval(ticker); 134 | ticker = setInterval(track, 100); 135 | 136 | e.preventDefault(); 137 | e.stopPropagation(); 138 | return false; 139 | } 140 | 141 | function drag(e) { 142 | var x, delta; 143 | if (pressed) { 144 | x = xpos(e); 145 | delta = reference - x; 146 | if (delta > 2 || delta < -2) { 147 | reference = x; 148 | scroll(offset + delta); 149 | } 150 | } 151 | e.preventDefault(); 152 | e.stopPropagation(); 153 | return false; 154 | } 155 | 156 | function release(e) { 157 | pressed = false; 158 | 159 | clearInterval(ticker); 160 | target = offset; 161 | if (velocity > 10 || velocity < -10) { 162 | amplitude = 1.2 * velocity; 163 | target = offset + amplitude; 164 | } 165 | target = Math.round(target / snap) * snap; 166 | target = (target < -snap) ? -snap : (target > snap) ? snap : target; 167 | amplitude = target - offset; 168 | timestamp = Date.now(); 169 | requestAnimationFrame(autoScroll); 170 | 171 | e.preventDefault(); 172 | e.stopPropagation(); 173 | return false; 174 | } 175 | 176 | xform = 'transform'; 177 | ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { 178 | var e = prefix + 'Transform'; 179 | if (typeof document.body.style[e] !== 'undefined') { 180 | xform = e; 181 | return false; 182 | } 183 | return true; 184 | }); 185 | 186 | initialize(); 187 | setupEvents(); 188 | display(0); 189 | }; 190 | -------------------------------------------------------------------------------- /5/coverflow.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var count, images, dim, offset, center, angle, dist, shift, 5 | pressed, reference, amplitude, target, velocity, timeConstant, 6 | xform, frame, timestamp, ticker; 7 | 8 | function initialize() { 9 | pressed = false; 10 | timeConstant = 250; // ms 11 | dim = 200; 12 | offset = target = 0; 13 | angle = -60; 14 | dist = -150; 15 | shift = 10; 16 | count = 9; 17 | images = []; 18 | while (images.length < count) { 19 | images.push(document.getElementById(images.length)); 20 | } 21 | } 22 | 23 | function setupEvents() { 24 | var view = document.getElementById('content'); 25 | if (typeof window.ontouchstart !== 'undefined') { 26 | view.addEventListener('touchstart', tap); 27 | view.addEventListener('touchmove', drag); 28 | view.addEventListener('touchend', release); 29 | } 30 | view.addEventListener('mousedown', tap); 31 | view.addEventListener('mousemove', drag); 32 | view.addEventListener('mouseup', release); 33 | document.addEventListener('keydown', handleKey); 34 | } 35 | 36 | function xpos(e) { 37 | // touch event 38 | if (e.targetTouches && (e.targetTouches.length >= 1)) { 39 | return e.targetTouches[0].clientX; 40 | } 41 | 42 | // mouse event 43 | return e.clientX; 44 | } 45 | 46 | function wrap(x) { 47 | return (x >= count) ? (x % count) : (x < 0) ? wrap(count + (x % count)) : x; 48 | } 49 | 50 | function scroll(x) { 51 | var i, half, delta, dir, tween, el, alignment; 52 | 53 | offset = (typeof x === 'number') ? x : offset; 54 | center = Math.floor((offset + dim / 2) / dim); 55 | delta = offset - center * dim; 56 | dir = (delta < 0) ? 1 : -1; 57 | tween = -dir * delta * 2 / dim; 58 | 59 | alignment = 'translateX(' + (innerWidth - dim) / 2 + 'px) '; 60 | alignment += 'translateY(' + (innerHeight - dim) / 2 + 'px)'; 61 | 62 | half = count >> 1; 63 | for (i = 1; i <= half; ++i) { 64 | // right side 65 | el = images[wrap(center + i)]; 66 | el.style[xform] = alignment + 67 | ' translateX(' + (shift + (dim * i - delta) / 2) + 'px)' + 68 | ' translateZ(' + dist + 'px)' + 69 | ' rotateY(' + angle + 'deg)'; 70 | el.style.zIndex = -i; 71 | el.style.opacity = (i === half && delta < 0) ? 1 - tween : 1; 72 | 73 | // left side 74 | el = images[wrap(center - i)]; 75 | el.style[xform] = alignment + 76 | ' translateX(' + (-shift + (-dim * i - delta) / 2) + 'px)' + 77 | ' translateZ(' + dist + 'px)' + 78 | ' rotateY(' + -angle + 'deg)'; 79 | el.style.zIndex = -i; 80 | el.style.opacity = (i === half && delta > 0) ? 1 - tween : 1; 81 | } 82 | 83 | // center 84 | el = images[wrap(center)]; 85 | el.style[xform] = alignment + 86 | ' translateX(' + (-delta / 2) + 'px)' + 87 | ' translateX(' + (dir * shift * tween) + 'px)' + 88 | ' translateZ(' + (dist * tween) + 'px)' + 89 | ' rotateY(' + (dir * angle * tween) + 'deg)'; 90 | el.style.zIndex = 0; 91 | el.style.opacity = 1; 92 | } 93 | 94 | function track() { 95 | var now, elapsed, delta, v; 96 | 97 | now = Date.now(); 98 | elapsed = now - timestamp; 99 | timestamp = now; 100 | delta = offset - frame; 101 | frame = offset; 102 | 103 | v = 1000 * delta / (1 + elapsed); 104 | velocity = 0.8 * v + 0.2 * velocity; 105 | } 106 | 107 | function autoScroll() { 108 | var elapsed, delta; 109 | 110 | if (amplitude) { 111 | elapsed = Date.now() - timestamp; 112 | delta = amplitude * Math.exp(-elapsed / timeConstant); 113 | if (delta > 4 || delta < -4) { 114 | scroll(target - delta); 115 | requestAnimationFrame(autoScroll); 116 | } else { 117 | scroll(target); 118 | } 119 | } 120 | } 121 | 122 | function tap(e) { 123 | pressed = true; 124 | reference = xpos(e); 125 | 126 | velocity = amplitude = 0; 127 | frame = offset; 128 | timestamp = Date.now(); 129 | clearInterval(ticker); 130 | ticker = setInterval(track, 100); 131 | 132 | e.preventDefault(); 133 | e.stopPropagation(); 134 | return false; 135 | } 136 | 137 | function drag(e) { 138 | var x, delta; 139 | if (pressed) { 140 | x = xpos(e); 141 | delta = reference - x; 142 | if (delta > 2 || delta < -2) { 143 | reference = x; 144 | scroll(offset + delta); 145 | } 146 | } 147 | e.preventDefault(); 148 | e.stopPropagation(); 149 | return false; 150 | } 151 | 152 | function release(e) { 153 | pressed = false; 154 | 155 | clearInterval(ticker); 156 | target = offset; 157 | if (velocity > 10 || velocity < -10) { 158 | amplitude = 0.9 * velocity; 159 | target = offset + amplitude; 160 | } 161 | target = Math.round(target / dim) * dim; 162 | amplitude = target - offset; 163 | timestamp = Date.now(); 164 | requestAnimationFrame(autoScroll); 165 | 166 | e.preventDefault(); 167 | e.stopPropagation(); 168 | return false; 169 | } 170 | 171 | function handleKey(e) { 172 | if (!pressed && (target === offset)) { 173 | // Space or PageDown or RightArrow or DownArrow 174 | if ([32, 34, 39, 40].indexOf(e.which) >= 0) { 175 | target = offset + dim; 176 | } 177 | // PageUp or LeftArrow or UpArrow 178 | if ([33, 37, 38].indexOf(e.which) >= 0) { 179 | target = offset - dim; 180 | } 181 | if (offset !== target) { 182 | amplitude = target - offset; 183 | timestamp = Date.now(); 184 | requestAnimationFrame(autoScroll); 185 | return true; 186 | } 187 | } 188 | } 189 | 190 | xform = 'transform'; 191 | ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { 192 | var e = prefix + 'Transform'; 193 | if (typeof document.body.style[e] !== 'undefined') { 194 | xform = e; 195 | return false; 196 | } 197 | return true; 198 | }); 199 | 200 | window.onresize = scroll; 201 | 202 | initialize(); 203 | setupEvents(); 204 | scroll(offset); 205 | }; 206 | -------------------------------------------------------------------------------- /1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Scrolling 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget purus libero. Nulla ut pretium libero. Vestibulum adipiscing quam ac sapien scelerisque, a posuere sem dictum. Ut aliquet lectus ut nibh dapibus cursus. Donec quam libero, aliquam nec aliquam quis, feugiat quis metus. Phasellus ac orci mauris. Cras hendrerit suscipit nisi, eget varius mi condimentum vel. Donec id libero magna. Nam scelerisque nisi tellus, ut cursus ipsum imperdiet eget. Donec porttitor non lectus ut lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut egestas commodo facilisis. Etiam orci nibh, pellentesque sed ipsum consequat, faucibus tempus augue. Cras iaculis diam in auctor bibendum. 17 |

18 |

19 | Nulla ornare, nisl vel condimentum bibendum, quam velit vestibulum sem, vel aliquam tellus urna vitae justo. Aenean elementum semper nulla, a mattis tellus venenatis in. Nulla rhoncus felis risus, sed convallis libero viverra at. Aenean at lobortis neque. Vivamus viverra lectus id libero congue bibendum. Curabitur id est et arcu dapibus laoreet. Duis imperdiet elit et mauris adipiscing, vehicula vulputate nisi accumsan. Nunc varius ante lorem, eget volutpat sem mollis blandit. 20 |

21 |

22 | Donec tincidunt rutrum tincidunt. Duis viverra sem in metus sodales, sed suscipit turpis aliquet. Etiam eleifend id dolor eget hendrerit. Curabitur pulvinar lacus et sapien dictum feugiat. Praesent iaculis sagittis ipsum nec semper. Nam pellentesque tortor ac nibh egestas dignissim. Curabitur sit amet auctor velit. Fusce nisl diam, placerat eget consectetur in, congue ut sapien. In in facilisis felis. Nulla faucibus magna eget odio tincidunt rhoncus. In ac molestie lorem. Aliquam pulvinar porta nibh id pulvinar. Morbi id gravida libero. Nam consectetur, metus sit amet tincidunt varius, nibh tortor molestie nulla, non semper risus ligula non lectus. 23 |

24 |

25 | Phasellus imperdiet tincidunt ultricies. Vivamus mi tellus, pellentesque sed venenatis et, imperdiet at tellus. Fusce ut dui lobortis, sodales libero eget, elementum lacus. Nullam nisi urna, semper eget consequat at, sollicitudin non justo. Mauris consequat velit feugiat mollis bibendum. Aliquam mi enim, porta et vestibulum at, ultrices id ante. Ut vitae est non justo hendrerit pellentesque vel nec urna. Pellentesque gravida consequat quam at scelerisque. Proin mauris purus, euismod sit amet dui et, tempor feugiat est. Maecenas sed pretium quam, vitae sagittis nisl. Donec sed augue bibendum, elementum nulla tincidunt, semper risus. 26 |

27 |

28 | Suspendisse molestie placerat eros et posuere. Nullam tellus nisi, fermentum eu felis quis, consequat vestibulum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce congue pellentesque felis a venenatis. Morbi lacus libero, ornare id velit sit amet, gravida viverra elit. Proin id tellus nec lacus pulvinar tempor. Aliquam eu ligula nisi. Pellentesque interdum imperdiet urna at tristique. Duis nunc sapien, tincidunt nec posuere ac, scelerisque sed justo. Maecenas in ultricies arcu, eget mattis enim. Duis sollicitudin nec mauris sed interdum. Fusce et viverra dolor, vitae ullamcorper mauris. Nulla quis libero in dolor pellentesque convallis nec quis sem. Nulla quis malesuada dui. Mauris non vehicula arcu, non elementum turpis. 29 |

30 |

31 | Praesent faucibus, ipsum et rhoncus vestibulum, lacus tortor pellentesque lorem, vel elementum nunc lectus et est. Mauris semper lacinia sapien, nec consectetur elit adipiscing consectetur. In hac habitasse platea dictumst. Maecenas velit elit, placerat et quam at, commodo commodo ante. Praesent vel nulla dui. Phasellus rutrum velit nec dui dignissim, vitae tincidunt augue ultricies. Ut tincidunt sem ut viverra gravida. Vestibulum pellentesque ligula eget orci commodo venenatis. Donec metus urna, congue et adipiscing nec, placerat ac dui. Proin vel euismod magna, in venenatis tortor. Mauris pellentesque libero eu quam hendrerit porttitor. Proin lobortis lectus sed urna consequat euismod a et nibh. Suspendisse lacinia blandit nibh, nec tincidunt odio feugiat vitae. Nulla rhoncus tellus sed risus mattis, placerat imperdiet elit gravida. Vivamus fringilla, dui quis faucibus volutpat, lorem orci tristique urna, sed convallis turpis ipsum rutrum dolor. 32 |

33 |

34 | Aliquam turpis velit, pulvinar vitae vestibulum vel, volutpat a lorem. Aenean mattis ut felis ut egestas. Sed quis sapien quam. Fusce risus ligula, malesuada sed venenatis at, cursus nec enim. Phasellus ac dolor auctor mauris porta cursus. Proin tincidunt libero pulvinar, dapibus ligula nec, venenatis purus. Maecenas mauris nulla, faucibus ac posuere at, semper sollicitudin arcu. Fusce facilisis sem erat. Etiam vel augue sapien. Suspendisse potenti. Etiam aliquet semper nunc, in scelerisque nibh dapibus sit amet. Duis iaculis tempus magna sit amet posuere. Cras ac bibendum purus. 35 |

36 |

37 | Fusce non risus placerat, vestibulum metus non, varius tellus. Etiam quis augue vitae lorem dignissim condimentum at ac ante. Aliquam dignissim eros orci, nec aliquet arcu euismod in. Maecenas dictum dui a tristique fringilla. Aliquam dui turpis, congue vitae metus nec, cursus ornare lectus. Pellentesque interdum erat ac placerat volutpat. Nulla feugiat, ligula a lobortis rutrum, sem libero tristique nisi, quis aliquam ligula nisl id erat. Vestibulum quam diam, gravida vitae enim eu, ornare posuere nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus nibh justo, luctus luctus ligula suscipit sit amet. 38 |

39 |

40 | Proin at arcu nibh. Proin venenatis magna accumsan, bibendum augue adipiscing, facilisis lacus. Cras lectus urna, facilisis quis adipiscing non, blandit et arcu. Suspendisse sagittis adipiscing purus at convallis. Etiam consequat urna erat, at varius neque euismod quis. Pellentesque euismod urna quis sem faucibus pellentesque. Nam egestas, quam porta facilisis ultricies, velit nisi posuere sapien, quis facilisis lacus dolor id justo. Vestibulum mattis erat sed iaculis vulputate. 41 |

42 |

43 | Vestibulum tincidunt vestibulum turpis, in scelerisque nibh. Cras nunc metus, cursus in lectus eu, mollis adipiscing erat. Vivamus venenatis nibh quam, at posuere tortor rhoncus eu. Donec nunc tortor, dictum quis sagittis nec, imperdiet a turpis. Cras sodales ante mauris, eget tincidunt mauris ultricies in. Mauris hendrerit aliquam sem, at commodo orci volutpat vel. In dolor felis, congue vitae orci ut, mollis tristique diam. Praesent diam erat, pretium in ipsum non, cursus rutrum lectus. Ut vitae arcu eu neque porta egestas. Nam id nisl semper, tristique ligula vitae, interdum diam. Phasellus et nisi non nunc posuere rutrum. Praesent eu arcu quam. Fusce sed elit urna. 44 |

45 |

(END OF TEXT)

46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Kinetic Scrolling 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 | 18 |
← Choose color
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 |
Kinetic scrolling with snap-to-grid
No edge bouncing effect
 
 
Alice Blue
Antique White
Aqua
Aquamarine
Azure
Beige
Bisque
Black
Blanched Almond
Blue
Blue Violet
Brown
Burlywood
Cadet Blue
Chartreuse
Chocolate
Coral
Cornflower
Cornsilk
Crimson
Cyan
Dark Blue
Dark Cyan
Dark Goldenrod
Dark Gray
Dark Green
Dark Khaki
Dark Magenta
Dark Olive Green
Dark Orange
Dark Orchid
Dark Red
Dark Salmon
Dark Sea Green
Dark Slate Blue
Dark Slate Gray
Dark Turquoise
Dark Violet
Deep Pink
Deep Sky Blue
Dim Gray
Dodger Blue
Firebrick
Floral White
Forest Green
Fuchsia
Gainsboro
Ghost White
Gold
Goldenrod
Gray
Green
Green Yellow
Honeydew
Hot Pink
Indian Red
Indigo
Ivory
Khaki
Lavender
Lavender Blush
Lawn Green
Lemon Chiffon
Light Blue
Light Coral
Light Cyan
Light Goldenrod
Light Gray
Light Green
Light Pink
Light Salmon
Light Sea Green
Light Sky Blue
Light Slate Gray
Light Steel Blue
Light Yellow
Lime
Lime Green
Linen
Magenta
Maroon
Medium Aquamarine
Medium Blue
Medium Orchid
Medium Purple
Medium Sea Green
Medium Slate Blue
Medium Spring Green
Medium Turquoise
Medium Violet Red
Midnight Blue
Mint Cream
Misty Rose
Moccasin
Navajo White
Navy
Old Lace
Olive
Olive Drab
Orange
Orange Red
Orchid
Pale Goldenrod
Pale Green
Pale Turquoise
Pale Violet Red
Papaya Whip
Peach Puff
Peru
Pink
Plum
Powder Blue
Purple
Red
Rosy Brown
Royal Blue
Saddle Brown
Salmon
Sandy Brown
Sea Green
Seashell
Sienna
Silver
Sky Blue
Slate Blue
Slate Gray
Snow
Spring Green
Steel Blue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
White Smoke
Yellow
 
 
 
 
 
 
 
 
 
 
178 |
179 |
180 | 181 | 182 | -------------------------------------------------------------------------------- /2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Kinetic Scrolling 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 |
#2: Kinetic scrolling with momentum
No edge bouncing effect
 
Abby Riley
Adela Lewis
Adriana Bailey
Aileen Munoz
Alba Wiggins
Alexandria Morales
Alicia Richardson
Alison Wells
Allyson Kennedy
Alyce Gutierrez
Amanda Mcconnell
Amparo Ross
Andrea Finch
Angelica Lee
Angelita Bernard
Anna Hendrix
Annie Orr
April Huff
Ashlee Cochran
Augusta Wright
Ava Hester
Beatrice Britt
Benita Fischer
Berta Thornton
Bessie Simpson
Bette Nicholson
Beulah Bright
Billie Hodge
Bobbie Cooley
Brandie Vincent
Brianna Nichols
Brigitte George
Brooke Gould
Candace Hughes
Carey Whitney
Carly Stevens
Carol Olson
Carolyn Ellis
Cassandra Rodgers
Cathleen Petersen
Cecile Mueller
Celina Koch
Charlotte Oneil
Cheri Mcgowan
Chris Buckner
Christie Faulkner
Chrystal Farmer
Clare Edwards
Claudia Clark
Colette Pennington
Connie Gill
Corina Yang
Corrine Black
Cynthia Gilmore
Danielle Copeland
Darlene Armstrong
Deanna Pena
Deborah Schmidt
Deidre Sharp
Delores Mcgee
Desiree Berg
Dianna Cohen
Dixie Dunlap
Dominique Flynn
Doreen York
Dorthy Maynard
Ebony Farrell
Edwina Burnett
Elba Mccormick
Elisa Brown
Elizabeth Roberson
Elnora Hammond
Elva Townsend
Emily Logan
Ericka Langley
Erna Christian
Essie Herring
Ester Booth
Eugenia Sullivan
Evangelina Bennett
Faith Ramirez
Faye Hogan
Flora Holder
Fran Norris
Francis Buck
Freida Estes
Gail Frost
Gena Baldwin
Georgia Savage
Gilda Carney
Glenda Mckay
Grace Dodson
Gretchen Rojas
Haley Frye
Harriett Manning
Heidi Cooper
Helga Allison
Hilary Lawrence
Holly Colon
Ilene Kent
Ines Page
Iris Jarvis
Isabelle Figueroa
Jacklyn Garrison
Jaime Shaffer
Jan Benson
Janelle Key
Janie Solis
Jannie Blake
Jeanette Waters
Jeannette Woodard
Jenna Winters
Jeri Bass
Jessie Hurley
Jillian Boyd
Joann Weeks
Jodi Campbell
John Kelley
Jordan Ayers
Josie Lyons
Juanita Lane
Juliana Stein
Juliette Eaton
Kara Curtis
Karina Trevino
Kate Chen
Katheryn Powell
Kathryn Duncan
Katrina Simmons
Kayla Watts
Kellie Maxwell
Kenya Cameron
Kim Haney
Kitty Griffin
Kristi Lynn
Kristine Rowe
Lacy Serrano
Lana Holcomb
Latonya Long
Lauren Riddle
Lavonne Sweet
Leann Parks
Leigh Larson
Lena Lamb
Leona Justice
Leslie Turner
Leticia Gay
Lilia Singleton
Lillie Todd
Linda Arnold
Liz Moody
Lola Kemp
Lorena Franks
Lorie Fowler
Lottie Church
Louise Mcdonald
Lucile Stark
Luella Nolan
Luz Graham
Lynn Abbott
Mable Sellers
Madge Russo
Mai Barlow
Mandy Odonnell
Marci Lancaster
Margaret Conner
Margo Delacruz
Maria Leach
Maribel Hahn
Marilyn Wallace
Marisol Haley
Marla Stuart
Marta Browning
Mary Sharpe
Marylou Hays
Maura Benton
May Dickson
Meghan Leonard
Melisa Mccarty
Mercedes Mccullough
Michael Griffith
Mildred Riggs
Minerva William
Misty Jacobson
Mona Mcfarland
Muriel Mcneil
Nadia Barrett
Nannie Hurst
Natasha Monroe
Nettie Gallegos
Nikki Morrison
Noemi Dudley
Noreen Santana
Ola Hodges
Ollie Cote
Paige Burt
Pat Lara
Patsy Mckinney
Paulette Oconnor
Peggy Vaughan
Phoebe Jenkins
Queen Ball
Rae Grimes
Reba Hale
Rena Meyer
Reyna Rogers
Rita Cobb
Robin Banks
Rosa Galloway
Rosalyn Crane
Rose Frazier
Rosemary Herrera
Rowena Holt
Ruth Ware
Sallie Mcfadden
Sandy Barnett
Saundra Ramos
Serena Bradshaw
Shari Stanton
Shauna Adkins
Sheila Lindsay
Shelly Soto
Sherrie Neal
Silvia Pope
Sondra Jackson
Sophia Dillard
Stacie Barry
Stephanie Hull
Susana Wynn
Suzanne Levine
Tabatha Ratliff
Tamera Phillips
Tammie Murray
Tanisha Brewer
Taylor Patrick
Terri Kramer
Thelma Reilly
Tiffany Farley
Toni Oneill
Traci Bates
Trina Bradley
Ursula Erickson
Vanessa Gross
Veronica Wilder
Victoria Snider
Virgie Rivas
Wanda Barr
Wilda Ferguson
Winifred Dejesus
Young Frank
272 |
273 |
274 | 275 | 276 | -------------------------------------------------------------------------------- /css/pure-nr-min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Pure v0.2.1 3 | Copyright 2013 Yahoo! Inc. All rights reserved. 4 | Licensed under the BSD License. 5 | https://github.com/yui/pure/blob/master/LICENSE.md 6 | */ 7 | /*! 8 | normalize.css v1.1.2 | MIT License | git.io/normalize 9 | Copyright (c) Nicolas Gallagher and Jonathan Neal 10 | */ 11 | /*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} 12 | .pure-button{display:inline-block;*display:inline;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button{font-size:100%;*font-size:90%;*overflow:visible;padding:.5em 1.5em;color:#444;color:rgba(0,0,0,.8);*color:#444;border:1px solid #999;border:0 rgba(0,0,0,0);background-color:#E6E6E6;text-decoration:none;border-radius:2px;-webkit-font-smoothing:antialiased;-webkit-transition:.1s linear -webkit-box-shadow;-moz-transition:.1s linear -moz-box-shadow;-ms-transition:.1s linear box-shadow;-o-transition:.1s linear box-shadow;transition:.1s linear box-shadow}.pure-button-hover,.pure-button:hover,.pure-button:focus{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset}.pure-button[disabled],.pure-button-disabled,.pure-button-disabled:hover,.pure-button-disabled:focus,.pure-button-disabled:active{border:0;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);filter:alpha(opacity=40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4;cursor:not-allowed;box-shadow:none}.pure-button-hidden{display:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff} 13 | .pure-form{margin:0}.pure-form fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}.pure-form legend{border:0;padding:0;white-space:normal;*margin-left:-7px}.pure-form button,.pure-form input,.pure-form select,.pure-form textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}.pure-form button,.pure-form input{line-height:normal}.pure-form button,.pure-form input[type=button],.pure-form input[type=reset],.pure-form input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}.pure-form button[disabled],.pure-form input[disabled]{cursor:default}.pure-form input[type=checkbox],.pure-form input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}.pure-form input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.pure-form input[type=search]::-webkit-search-cancel-button,.pure-form input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.pure-form button::-moz-focus-inner,.pure-form input::-moz-focus-inner{border:0;padding:0}.pure-form textarea{overflow:auto;vertical-align:top}.pure-form input[type=text],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;font-size:.8em;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;-webkit-transition:.3s linear border;-moz-transition:.3s linear border;-ms-transition:.3s linear border;-o-transition:.3s linear border;transition:.3s linear border;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased}.pure-form input[type=text]:focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;outline:thin dotted \9;border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus,.pure-form input[type=checkbox]:focus{outline:thin dotted #333;outline:1px auto #129FEA}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input[type=text][disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly],.pure-form input[readonly]:focus,.pure-form select[readonly]:focus,.pure-form textarea[readonly]:focus{background:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form textarea:focus:invalid,.pure-form select:focus:invalid{color:#b94a48;border:1px solid #ee5f5b}.pure-form input:focus:invalid:focus,.pure-form textarea:focus:invalid:focus,.pure-form select:focus:invalid:focus{border-color:#e9322d}.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em;font-size:90%}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;font-size:125%;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input[type=text],.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked select,.pure-form-stacked label,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned input,.pure-form-aligned textarea,.pure-form-aligned select,.pure-form-aligned .pure-help-inline,.pure-form-message-inline{display:inline-block;*display:inline;*zoom:1;vertical-align:middle}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 10em}.pure-form input.pure-input-rounded,.pure-form .pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input{display:block;padding:10px;margin:0;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus{z-index:2}.pure-form .pure-group input:first-child{top:1px;border-radius:4px 4px 0 0}.pure-form .pure-group input:last-child{top:-2px;border-radius:0 0 4px 4px}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:90%}.pure-form-message{display:block;color:#666;font-size:90%} 14 | .pure-g{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4,.pure-u-1-5,.pure-u-2-5,.pure-u-3-5,.pure-u-4-5,.pure-u-1-6,.pure-u-5-6,.pure-u-1-8,.pure-u-3-8,.pure-u-5-8,.pure-u-7-8,.pure-u-1-12,.pure-u-5-12,.pure-u-7-12,.pure-u-11-12,.pure-u-1-24,.pure-u-5-24,.pure-u-7-24,.pure-u-11-24,.pure-u-13-24,.pure-u-17-24,.pure-u-19-24,.pure-u-23-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1{width:100%}.pure-u-1-2{width:50%}.pure-u-1-3{width:33.33333%}.pure-u-2-3{width:66.66666%}.pure-u-1-4{width:25%}.pure-u-3-4{width:75%}.pure-u-1-5{width:20%}.pure-u-2-5{width:40%}.pure-u-3-5{width:60%}.pure-u-4-5{width:80%}.pure-u-1-6{width:16.666%}.pure-u-5-6{width:83.33%}.pure-u-1-8{width:12.5%}.pure-u-3-8{width:37.5%}.pure-u-5-8{width:62.5%}.pure-u-7-8{width:87.5%}.pure-u-1-12{width:8.3333%}.pure-u-5-12{width:41.6666%}.pure-u-7-12{width:58.3333%}.pure-u-11-12{width:91.6666%}.pure-u-1-24{width:4.1666%}.pure-u-5-24{width:20.8333%}.pure-u-7-24{width:29.1666%}.pure-u-11-24{width:45.8333%}.pure-u-13-24{width:54.1666%}.pure-u-17-24{width:70.8333%}.pure-u-19-24{width:79.1666%}.pure-u-23-24{width:95.8333%} 15 | .pure-menu ul{position:absolute;visibility:hidden}.pure-menu.pure-menu-open{visibility:visible;z-index:2;width:100%}.pure-menu ul{left:-10000px;list-style:none;margin:0;padding:0;top:-10000px;z-index:1}.pure-menu>ul{position:relative}.pure-menu-open>ul{left:0;top:0;visibility:visible}.pure-menu-open>ul:focus{outline:0}.pure-menu li{position:relative}.pure-menu a,.pure-menu .pure-menu-heading{display:block;color:inherit;line-height:1.5em;padding:5px 20px;text-decoration:none;white-space:nowrap}.pure-menu.pure-menu-horizontal>.pure-menu-heading{display:inline-block;*display:inline;zoom:1;margin:0;vertical-align:middle}.pure-menu.pure-menu-horizontal>ul{display:inline-block;*display:inline;zoom:1;vertical-align:middle;height:2.4em}.pure-menu li a{padding:5px 20px}.pure-menu-can-have-children>.pure-menu-label:after{content:'\25B8';float:right;font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif;margin-right:-20px;margin-top:-1px}.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-separator{background-color:#dfdfdf;display:block;height:1px;font-size:0;margin:7px 2px;overflow:hidden}.pure-menu-hidden{display:none}.pure-menu-fixed{position:fixed;top:0;left:0;width:100%}.pure-menu-horizontal li{display:inline-block;*display:inline;zoom:1;vertical-align:middle}.pure-menu-horizontal li li{display:block}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label:after{content:"\25BE"}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-horizontal li.pure-menu-separator{height:50%;width:1px;margin:0 7px}.pure-menu-horizontal li li.pure-menu-separator{height:1px;width:auto;margin:7px 2px}.pure-menu.pure-menu-open,.pure-menu.pure-menu-horizontal li .pure-menu-children{background:#fff;border:1px solid #b7b7b7}.pure-menu.pure-menu-horizontal,.pure-menu.pure-menu-horizontal .pure-menu-heading{border:0}.pure-menu a{border:1px solid transparent;border-left:0;border-right:0}.pure-menu a,.pure-menu .pure-menu-can-have-children>li:after{color:#777}.pure-menu .pure-menu-can-have-children>li:hover:after{color:#fff}.pure-menu .pure-menu-open{background:#dedede}.pure-menu li a:hover,.pure-menu li a:focus{background:#eee}.pure-menu li.pure-menu-disabled a:hover,.pure-menu li.pure-menu-disabled a:focus{background:#fff;color:#bfbfbf}.pure-menu .pure-menu-disabled>a{background-image:none;border-color:transparent;cursor:default}.pure-menu .pure-menu-disabled>a,.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after{color:#bfbfbf}.pure-menu .pure-menu-heading{color:#565d64;text-transform:uppercase;font-size:90%;margin-top:.5em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#dfdfdf}.pure-menu .pure-menu-selected a{color:#000}.pure-menu.pure-menu-open.pure-menu-fixed{border:0;border-bottom:1px solid #b7b7b7}.pure-paginator{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed;list-style:none;margin:0;padding:0}.opera-only :-o-prefocus,.pure-paginator{word-spacing:-.43em}.pure-paginator li{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-paginator .pure-button{border-radius:0;padding:.8em 1.4em;vertical-align:top;height:1.1em}.pure-paginator .pure-button:focus,.pure-paginator .pure-button:active{outline-style:none}.pure-paginator .prev,.pure-paginator .next{color:#C0C1C3;text-shadow:0 -1px 0 rgba(0,0,0,.45)}.pure-paginator .prev{border-radius:2px 0 0 2px}.pure-paginator .next{border-radius:0 2px 2px 0} 16 | .pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:6px 12px}.pure-table td:first-child,.pure-table th:first-child{border-left-width:0}.pure-table thead{background:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td{background-color:#f2f2f2}.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child td,.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0} --------------------------------------------------------------------------------